Heim > Web-Frontend > js-Tutorial > js点击出现悬浮窗效果不使用JQuery插件_javascript技巧

js点击出现悬浮窗效果不使用JQuery插件_javascript技巧

WBOY
Freigeben: 2016-05-16 17:03:01
Original
1205 Leute haben es durchsucht

JQuery有很多这样的插件,但是我们公司不用jquery,没有插件,所以我就试着自己写,我也不知道别人是怎么写的,纯粹是按着自己的想法来的。

直接上代码:

复制代码 代码如下:





Demo









复制到本地就可以测试了。

这里要说一下cancelBubble这两个东西。因为我做的效果是点击按钮就显示div,点击页面的任意位置div就消失,但javascript的冒泡机制是button获得一个onclick事件后,往上冒泡,dom在获得一个onclick事件,这样的话就和让div消失的onclick事件冲突了,所以需要event.cancelBubble = true;这行代码来停止冒泡。大体就是这样,代码很简单。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage