jQuery阻止事件冒泡簡單介紹

antzone發表於2017-03-14

下面首先簡單介紹一下什麼是事件冒泡,所謂冒泡就是事件能夠像水泡一下能夠從底層元素像高層元素傳遞。

看下面程式碼:

[HTML] 純文字檢視 複製程式碼
<div id="box">
  <div id="inner"><a href="#">螞蟻部落</a></div>
</div>

當我們點選連結的時候,能夠觸發點選事件,這個事件不僅僅會在當前連結上觸發,還會傳遞到它的父級元素。

在很多情況下事件冒泡是一件好事情,但是有時候也是壞事情,下面就介紹一下jQuery如何阻止事件冒泡。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$("a").click(function(event){
  event.stopPropagation();
  //code
})

使用stopPropagation()即可實現阻止事件冒泡顯現。


相關文章