首先看下JS的事件模型,JS事件模型爲向上冒泡,如onclick事件在某一DOM元素被觸發後,事件將跟隨節點向上傳播,直到有click事件綁定在某一父節點上,如果沒有將直至文檔的根。
阻止冒泡:
1、stopPropagation()【對於非IE瀏覽器】
2、cancelBubble屬性爲true【對於IE瀏覽器】
另:Jquery已經有兼容瀏覽器的方法,event.stopImmediatePropagation();即
如果有多個相同類型事件的事件監聽函數綁定到同一個元素,當該類型的事件觸發時,它們會按照被添加的順序執行。如果其中某個監聽函數執行了 event.stopImmediatePropagation() 方法,則當前元素剩下的監聽函數將不會被執行。(譯者注:注意區別 event.stopPropagation )
案例參考如下
<html>
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<body>
<style type="text/css">
<!--
.outclick{ padding:30px 0; background:#c00; width:150px;}
.click{ margin:auto; width:50px; height:50px; background:#000;}
-->
</style>
<div class="outclick">
<div class="click"></div>
</div>
<script type="text/javascript">
$(function(){
$(".click").on("click",function(e){
console.log("click1")
//事件
e = e || event; stopFunc(e);
});
$(".outclick").on("click",function(e){
console.log("click2")
//事件
e = e || event; stopFunc(e);
});
$(document).on("click",function(){
console.log("click3")
//事件
});
//公共調用,冒泡事件阻止
var stopFunc = function(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
});
</script>
</body>
</html>