兼容低版本IE浏览器的阻止事件冒泡效果代码

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了能够兼容低版本IE浏览器的阻止事件冒泡效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容