2019獨角獸企業重金招聘Python工程師標準>>>

????前言：有時候，當我們給一個外層 div 添加了一個‘click’事件，然而在內層的其他元素我們也為它添加了 ‘click’事件，那么當我們點擊內層的元素時，外層的事件會響應嗎？接下來我們就來一步一步解開這個問題吧！

????一、準備： 這里是一個三層模型

????<!--cs--><div?class="outer"><div?class="inner"><button?class="btn">點擊我</button></div></div>

?????樣式圖：

????二、分別綁定事件：

???????$(function(){$('.outer').on('click',?function(){console.log('我是最外面的DIV,?時間:?'?+?new?Date().getMilliseconds());});$('.inner').on('click',?function(){console.log('我是最里面的DIV,?時間:?'?+?new?Date().getMilliseconds());});$('.btn').on('click',?function(){console.log('我是按鈕哦！,?時間:?'?+?new?Date().getMilliseconds());});});

? ?三、?點擊中間的按鈕后：

????四、現象：可以看見基本上是同一時間執行了，‘btn’上面的所有綁定了 ‘click’元素的click事件。這就是事件的冒泡帶來的影響！要避免這樣的現象發生，首先我們要清楚自己的目的是什么！這樣就能很好的解決這個問題了，好了，廢話不多說，return main；

????五、阻止：

????????jQuery方式一，通過 返回 false 實現

????????????$('.btn').on('click',?function(){console.log('我是按鈕哦！,?時間:?'?+?new?Date().getMilliseconds());return?false;?//阻止事件冒泡傳播});

????????方式二， 使用函數 event.stopPropagation();

????????????$('.btn').on('click',?function(){console.log('我是按鈕哦！,?時間:?'?+?new?Date().getMilliseconds());event.stopPropagation();});

????六、結果驗證：

????七、總結：

????????????1.一個事件起泡對應觸發的是上層的同一事件?
　　??????????特殊：如果 outer 設置成雙擊事件，那么在你單擊 btn 的時候就會起泡觸發btn 和 inner 單擊的事件?（這里注意雙擊包含單擊）。?
????????????2.如果在click事件中，在你要處理的事件之前加上e.preventDefault();?那么就取消了默認行為（通俗理解：相當于做了個return操作），不執行之后的語句了。（和阻止冒泡不是一回事）； ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??3.e.stopPropagation()只要在click事件中，就不會觸發上層click事件。

????預告: 下一篇應該是BFC（塊級格式化上下文）

轉載于:https://my.oschina.net/leipeng/blog/220869

總結

以上是生活随笔為你收集整理的什么是事件冒泡？如何用jquery/js阻止事件冒泡？阻止冒泡有什么作用？小生来抛个砖。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。