上一次课程的dom events知识?
事件模型.png
用实际例子学习dom事件模型
——点击别处关闭浮层的效果
搜 bootstrap popover
bootstrap-popover
怎么给浮层加个三角形的???
stopPropagation.png给btn加一个eventListener,将浮层显示
给document加一个eventListener,将浮层隐藏
但因为冒泡,在点击btn的时候会先执行btn的el,再执行document的el,先显示马上再隐藏,没有效果。
image.png
怎么解决呢?
——给wrapper(包括btn和浮层)添加阻止冒泡 e.stopPropagation(),这样就不会执行document的事件监听了
image.png
-
用jquery实现
jq+one.png
——改用jq实现,on改成one,只执行一次,节省内存
用one了,可以不阻止冒泡吗??
image.png
——不行,在click btn的时候,先执行show(),再执行给documnet加EL,然后马上就嫁给document了,接着向上冒泡,因为没有阻止,到document了,就会执行这个EL,隐藏浮层。马上就加了EL,紧接着就执行了
- 解决方案1:阻止冒泡
-
解决方案2:用setTimeout,等冒泡阶段完成后再添加el
image.png
先冒泡,click向上冒泡阶段完成了后才执行setTimeout里面的代码
- 课后习题浮层-我的实现:
代码地址
预览地址
会从里面一层依次向外层执行
网友评论