使用js冒泡实现点击空白处关闭弹窗

1. 什么是事件冒泡？

如图：在一个对象上触发某类事件（比如单击onclick事件），这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。自下而上的去触发事件。

2. 事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。
   

3. html结构

<div class="screen" id="parent"> <div class="layer-screen"> <div class="screen-content"> <a class="filter-tag" href="void(0);">点击a标签a> div> div> div>

 

4.Script

<script> $(function(){ document.getElementById("parent").addEventListener("click",function(e){ alert("我是最外层"); }); $(".layer-screen").click(function(e){ alert("我是中间层"); }); $("a").click(function(e){ alert("我是a标签"); }); }); script>

 

5.执行结果

a) 点击a标签，弹出：我是a标签 → 我是中间层 → 我是最外层 b) 点击中间层，弹出：我是中间层 → 我是最外层 c) 点击最外层，弹出：我是最外层

 

6.通过阻止事件冒泡实现点击空白处关闭弹窗

id=”parent”层作为屏蔽层，class="layer-screen"作为弹出层，给id=”parent”即最外层添加关闭弹窗的方法，给中间层和a标签绑定click事件，通过event.stopPropagation()停止事件的冒泡传递。 可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。默认为冒泡。 ele.addEventListener(\'click\',doSomething2,true)

 

7.阻止事件冒泡后的function

示例： //阻止事件冒泡 $("a").click(function(e){ alert("我是a标签"); e.stopPropagation(); });

 

8.执行结果

a) 点击a标签，弹出：我是a标签 b) 点击中间层，弹出：我是中间层 c) 点击最外层，弹出：我是最外层

 

9.在id=”parent”层的绑定事件中添加关闭弹窗的方法即可。

10.事件捕获的测试

给a标签设置id=”a”，给中间层设置id=“center”，修改参数为true document.getElementById("parent").addEventListener("click",function(){ alert("我是最外层"); },true) document.getElementById("center").addEventListener("click",function(){ alert("我是中间层"); },true) document.getElementById("a").addEventListener("click",function(){ alert("我是a标签"); },true)

 

执行结果：

点击a标签，弹出： 我是最外层 → 我是中间层 → 我是a标签 即与事件捕获的执行顺序相反。

(将所有的点击事件参数都改为true才会出现该效果)