怎么让弹出框Popover浮起来在最上层

来源：蜘蛛抓取(WebSpider) 时间：2017-11-13 06:44 标签：

1从popover（点击别处关闭浮层）理解冒泡与捕获

当几个DIV嵌套,触发事件时,是先进行捕获阶段的触发,再进行冒泡阶段的触发的.
想要的效果是点击别处关闭浮层


点击时触发了console.log函数,说明觸发了document的点击事件,可是为什么没有出现浮层呢?

因为两次addEventListener是没有加参数的,所以以冒泡阶段执行两个事件,当点击点我按钮,结果是依次触发点我按钮的click事件和document的click事件.所以没有想要效果

加上debugger后发现两个函数确实都执行了,


但是出现一个bug.当我点击点我按钮,浮层不会消失,但是当我点击浮层,浮层还是会消失,我想让浮层被点击时也不消失,只是点击其他地方消失,该如何做呢?


将阻止冒泡事件加在wrapper上,这样当冒泡执行到wrapper时,就不会再继续往上传播,即到wrapper就停止了

preventDefault 是另外一个相关的方法它可以阻止事件触发后默认动作的发生。

即既阻止默认事件,又阻止冒泡事件.
但是这样会出現一个BUG.

2.3内存问题,如何优化

假如页面中有很多popover,那么每个document都要添加监听点击事件.这样浪费内存
解决方法:不一直监听document,只有当popover出来的时候才监听,且呮监听一次,当点击完document,就清除了监听事件.这样节省内存

2.3.1引出另一个问题,

去掉阻止冒泡事件,按理来说,点击button,知识添加了document的点击事件,而为什么有触發了document的点击事件呢?

因为代码是按照同步执行的规则来的,同步事件
,即一步一步的执行,这一步没有完成,不会进行下一步.当点击了btn,会把点击事件添加到document,然后冒泡才继续往上执行.

让这个添加监听事件函数慢一点执行,等冒泡阶段走完再执行


浏览器有一个BUG,当页面标签切换时,setInterval回不工作或间歇性工作.例如

每秒打印两次日期,当切换别的标签页,再切回来时发现,setInterval只打印了一次,说明setInterval间歇工作

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.


我要回帖

 

随机推荐