js阻止事件冒泡实例代码

关于事件冒泡的概念这里就不介绍了，具体可以参阅javascript事件冒泡简单介绍一章节。 

下面直接给出原生javascript阻止事件冒泡的代码，由于浏览器兼容性问题，所以需要进行兼容性处理。

代码如下:

[ 其他 ] 运行代码下载代码

<script>
function stopPro(evt){ 
  var e = evt || window.event; 
  window.event?e.cancelBubble=true:e.stopPropagation(); 
}
</script>

上面就是一个能够兼容所有浏览器的js代码，可能有些朋友感觉如果有一个完整的代码实例就更好了

完整代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</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>

代码描述：js阻止事件冒泡。js阻止事件冒泡实例代码

下载全部收藏

166 221

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册