相容低版本IE瀏覽器的阻止事件冒泡效果程式碼

admin發表於2017-04-08
瀏覽器事件

本章節分享一段程式碼例項，它實現了能夠相容低版本IE瀏覽器的阻止事件冒泡效果。

程式碼例項如下:

[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:green;
}
#inner{
  width:100px;
  height:100px;
  background-color:red;
  margin:0px auto;
}
</style> 
<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var oinner=document.getElementById("inner");
  var oshow=document.getElementById("show");
  var str="";
 
  oinner.onclick=function(ev){
    str=str+"子元素事件觸發";
    oshow.innerHTML=str;
    if(window.event){
      event.cancelBubble=true;
    }
    else if(ev){
      ev.stopPropagation();
    }
  }
 
  obox.onclick=function(){
    str=str+"|父元素事件觸發";
    oshow.innerHTML=str;
  }
}
</script> 
</head> 
<body> 
<div id="box">
  <div id="inner"></div>
</div>
<div id="show"></div>
</body> 
</html>

相關文章