取消冒泡事件

最新推荐文章于 2020-12-01 23:29:09 发布

weixin_34349320

最新推荐文章于 2020-12-01 23:29:09 发布

阅读量99

点赞数

文章标签： javascript ViewUI

这也时从别人那COPY来的。只不过是代码自己打了一次。原文

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

<html>
    <head>
        <title>
            <style type="text/css">
                *{ margin:0px; padding:0px;}
            </style>
        </title>
    </head>
    <body>
        <div id="obj1" style="width:500px;height:500px; background:#000;">
             <div id="obj2" style="width:400px;height:400px; background:red;"></div>
         </div>
         <script type="text/javascript">
               function stopBubble(e){
//如果传入了事件对象，那么就时非IE浏览器
                     if(e&&e.stopPropagtion){
                          e.stopPropagtion();
                         }
else{
                           window.event.canceBubble=true;
                         }
                 }
var obj1=document.getElementById('obj1');
var obj2=document.getElementById('obj2');
obj1.οnclick=function(){
    alert('我点击了obj1');
}
obj2.οnclick=function(e){
  alert('我点击了obj2');
  stopBubble(e);
}
         </script>
    </body>
</html>