jQuery阻止事件冒泡現象程式碼例項

admin發表於2017-03-30
jQuery事件

本章節通過程式碼例項介紹一下如何阻止事件冒泡效果。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{font-size:12px;}
#box{
  width:600px;
  height:200px;
  background:#CCC;
}
ul{
  background:#FFF;
  width:500px;
}
ul li{
  list-style:none;
  height:30px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#box").on("click",function(){
    $("#fatherShow").text("父元素上的事件觸發");
  })
  $("ul").on("click",function(){
    $("#childrenShow").text("ul元素上的事件觸發");
  })
})
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來</li>
    <li>本站的網站地址是softwhy.com</li>
    <li>每一天那都是新的，要好好珍惜。</li>
    <li>當前的時間是最實在的，下一秒都是虛幻的</li>
  </ul>
</div>
<span id="fatherShow"></span>
<span id="childrenShow"></span>
</body>
</html>

上面的程式碼中，點選ul元素也會觸發註冊在div元素上的事件處理函式，這就是事件冒泡現象。

如果要阻止這種現象，將子元素的事件處理函式修改如下:

[JavaScript] 純文字檢視 複製程式碼
$("ul").on("click",function(ev){
  $("#childrenShow").text("ul元素上的事件觸發");
  ev.stopPropagation();
})

相關閱讀:

1.事件冒泡可以參閱什麼是jquery事件冒泡一章節。

2.on()可以參閱jquery on()一章節。

相關文章