相容所有瀏覽器的阻止事件冒泡程式碼

admin發表於2017-03-20
瀏覽器事件

事件冒泡在實際應用有時候是好事情，有時候是壞事情，也就是說任何事情總有兩面性，所有有時候就需要阻止事件冒泡現象，下面通過程式碼例項介紹一下相容所有主流瀏覽器的阻止事件冒泡程式碼。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript">
window.onload=function()
{
  var odiv=document.getElementById("box");
  var obt=document.getElementById("bt");
  odiv.onclick=function(){alert("父元素上的事件被觸發!")}
  obt.onclick=function(){alert("按鈕上的事件觸發！")}
}
</script>
</head>
<body>
<div id="box"><input type="button" id="bt" value="檢視效果"/></div>
</body>
</html>

以上程式碼會出現事件冒泡現象，點選按鈕也會觸發註冊在div上的事件，關於什麼是事件冒泡具體可以參閱javascript事件冒泡簡單介紹一章節，這裡就不多介紹了。下面將程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript">
window.onload=function()
{
  var odiv=document.getElementById("box");
  var obt=document.getElementById("bt");
  odiv.onclick=function(){alert("父元素上的事件被觸發!")}
  obt.onclick=function(ev)
  {
    if(window.event)      
    {       
      event.cancelBubble=true;     
    }     
    else if(evt)     
    {       
      evt.stopPropagation();     
    } 
    alert("按鈕上的事件觸發！")
  }
}
</script>
</head>
<body>
<div id="box"><input type="button" id="bt" value="檢視效果"/></div>
</body>
</html>

以上程式碼只會觸發按鈕上的事件，而不會傳遞到父元素，程式碼比較簡單具體可以參閱相關閱讀或者跟帖留言。

相關閱讀:

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

2. e.cancelBubble可以參閱javascript cancelBubble事件屬性一章節。 

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

相關文章