js實現的點擊彈框外隱藏彈框的方法,即冒泡阻止

首先看下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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章