使用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纔會出現該效果)