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

螞蟻小編發表於2017-03-16
JS事件

關於事件冒泡的概念這裡就不介紹了，具體可以參閱javascript事件冒泡簡單介紹一章節。 

下面直接給出原生javascript阻止事件冒泡的程式碼，由於瀏覽器相容性問題，所以需要進行相容性處理。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function stopPro(evt){ 
  var e = evt || window.event; 
  window.event?e.cancelBubble=true:e.stopPropagation(); 
}

上面就是一個能夠相容所有瀏覽器的js程式碼，可能有些朋友感覺如果有一個完整的程式碼例項就更好了

完整程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  background-color:red;
}
#inner{
  width:50px;
  height:50px;
  background-color:blue;
}
</style>
<script type="text/javascript"> 
function stopPro(evt){ 
  var e = evt || window.event; 
  window.event?e.cancelBubble=true:e.stopPropagation(); 
} 
window.onload=function(){
  var obox=document.getElementById("box");
  var inner=document.getElementById("inner");
   
  obox.onclick=function(){alert("父元素")}
  inner.onclick=function(ev){
    var ev=ev||event;
    alert("子元素");
    stopPro(ev);
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="inner"></div> 
</div>
</body>
</html>

以上程式碼可以取消時間冒泡現象，程式碼比較簡單這裡就不多介紹了。

相關閱讀:

1.var e = evt || window.event可以參閱var ev=window.event||ev的作用是什麼一章節。

2. e.cancelBubble可以參閱javascript cancelBubble一章節。 

3.e.stopPropagation()可以參閱javascript stopPropagation()一章節。

相關文章