阻止jquery事件冒泡程式碼例項

antzone發表於2017-03-21
jQuery事件

幾乎任何事情都有好的一面也有壞的一面，事件冒泡也是如此，好的一面比如可以使用此現象實現事件委託，將單元格的點選事件註冊在table上，這樣就不用為每一個單元格註冊事件處理函式，但是壞的一面也是很明顯的，很多時候不希望事件向上傳遞，下面就是一段組織事件冒泡的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$(function(){
  $("#divOne").click(function(){
    $("#show").html("註冊在外層div上的事件被觸發");
  })
  $("#hr_three").click(function(event){
    $("#show").html("連結按鈕被點選");
    event.stopPropagation();
    event.preventDefault();
  });
});
</script>
</head> 
<body> 
<div id="show"></div>
<form id="theform"> 
<div id="divOne"> 
  <div id="divTwo"> 
    <a id="hr_three" href="http://www.softwhy.com">檢視效果</a> 
  </div> 
</div> 
</form> 
</body> 
</html>

上面你的程式碼組織點選事件的向上傳遞，因為在連結的事件處理函式中新增如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
event.stopPropagation()

如果沒有上面你的程式碼，註冊在父div上的事件處理函式也會執行，event.preventDefault()語句也是十分有必要的，它可能取消元素的預設動作，那麼這裡點選連結就失去了跳轉效果,在上面的程式碼中，點選連結也不會跳轉到螞蟻部落主頁，組織事件冒泡還可以使用return false語句，這個時候就不用新增event.preventDefault()了，因為return false，本身就有取消預設動作的效果。

相關文章