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

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

事件冒泡是一把雙刃劍，有有利的一面，也有不利的一面，在某些情況下需要阻止事件冒泡效果，但是由於低版本IE瀏覽器的存在所以相容性是一個問題，下面通過程式碼例項介紹一下相容所有瀏覽器的阻止事件冒泡的javascript程式碼。

先看一段程式碼例項:

[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:300px;
  height:300px;
  background:red;
  margin:0px auto;
  overflow:hidden;
}
#inner
{
  width:100px;
  height:100px;
  background:green;
  margin:0px auto;
  margin-top:125px;
  font-size:12px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var box=document.getElementById("box");
  var inner=document.getElementById("inner");
  box.onclick=function(){
    inner.innerHTML="事件傳遞到父元素";
  }
  inner.onclick=function(){
    inner.innerHTML="事件僅在本元素";
  }
}
</script> 
</head> 
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body> 
</html>

以上程式碼中，點選子div的時候，事件能夠傳遞給父元素，關於什麼是事件冒泡可以參閱javascript事件冒泡簡單介紹一章節。

程式碼修改如下:

[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:300px;
  height:300px;
  background:red;
  margin:0px auto;
  overflow:hidden;
}
#inner
{
  width:100px;
  height:100px;
  background:green;
  margin:0px auto;
  margin-top:125px;
  font-size:12px;
}
</style>
<script type="text/javascript"> 
function stopBubble(e)  
{  
  if(e&&e.stopPropagation)  
  {  
    e.stopPropagation();  
  }  
  else 
  {  
    window.event.cancelBubble=true;  
  }  
}
window.onload=function(){
  var box=document.getElementById("box");
  var inner=document.getElementById("inner");
  box.onclick=function(){
    inner.innerHTML="事件傳遞到父元素";
  }
  inner.onclick=function(ev){
    var ev=ev||window.event;
    stopBubble(ev);
    inner.innerHTML="事件僅在本元素";
  }
}
</script> 
</head> 
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body> 
</html>

以上程式碼可以成功阻止事件冒泡效果，具體可以參閱javascript阻止事件冒泡程式碼一章節。 

相關文章