使用js冒泡實現點擊空白處關閉彈窗
-
什麽是事件冒泡？
如圖：在一個對象上觸發某類事件（比如單擊onclick事件），這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。自下而上的去觸發事件。
-
事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。
-
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" 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才會出現該效果)
使用js冒泡實現點擊空白處關閉彈窗