事件冒泡处理-优快云博客

本文链接：https://blog.youkuaiyun.com/yanggreater/article/details/78831573

事件冒泡：

所谓的事件冒泡就是事件的传递，当子元素事件被人为触发之后，接下来就是自动触发它父级的事件，就这样一直向上传递，它带来的错误一般是不会被发现的，可能都觉的是没有获取到HTML元素等问题造成的。

处理方法：

首先是测试是否为事件冒泡导致的问题，我们就在子元素和父元素事件之间添加一个alert(1),将父元素事件和子元素事件隔开，观察是否是子元素事件先执行然后再执行父级事件。

处理方式：oEvent.cancelBubble = true; //oEvent代码下有解释

实例代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>事件冒泡处理</title>
</head>
<style type="text/css">
   div{width: 100px;height: 100px;display: none;background: red;}
</style>
<script type="text/javascript">

window.onload=function(){
   var oBtn=document.getElementById('btn');
   var oDiv=document.getElementById('div1');

   oBtn.onclick=function(ev){//由于oBtn父级就是全局事件，那么当执行了显示区块事件的瞬间后就会执行父级的事件即隐藏区块，那么在我们肉眼看来区块就根本没有出现过
       var oEvent=ev||event; //事件对象用来获取事件的详细信息

       oDiv.style.display='block';

       oEvent.cancelBubble = true;//取消事件冒泡
       //alert(1); 将父级事件和子元素事件中间断开，观察是否区块是不是先显示再隐藏


   }
   document.onclick=function(){//document指的是全局事件，在页面上任何处点击就会执行
       oDiv.style.display='none';

   }

}
</script>
<body>
   <input type="button" id="btn" value="点击显示">
   <div id="div1"></div>
</body>
</html>