关于event.cancelBubble和event.stopPropagation（）的困惑

首先我在网上看到不少文章大体上分为两个（不正确）观点：

1. cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器。

先不讲上面是对是错

先看一个例子：（测试环境：chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body onclick="alert('body');">

<input id="Button1" type="button" value="button" onclick="clickBtn(event)" />
    <script language="javascript" type="text/javascript">
        function clickBtn(event)
        {
            event=event?event:window.event;
            event.cancelBubble=true;
            alert(event.cancelBubble);
        }
    </script>
</body>
</html>

经过测试：

a,chrom5.0.275.7, opera10.53, ie6,7,8在这几个浏览器中， cancelBubble是有效的，并且可以阻止事件冒泡，使body的onclick不能触发。只触发button的click

alert(event.cancelBubble);输出结果true

b,在 moz3.6.4版本内，是不能阻止body的onclick的，但是alert(event.cancelBubble);输出结果仍然是true ,我想这应该是event.cancelBubble只是给event添加一个属性，并且赋值为true;

当把js代码改成这样时：

即可有效阻止。当然在chrome,opera中的 event.stopPropagation();也是有效的，

结论一：以上说明 event.cancelBubble在新版本chrome,opera浏览器中已经支持，就差moz了，其实个人认为event.cancelBubble比event.stopPropagation()更好，不仅从英文意思上。所以希望moz再发新版本也支持。这样就兼容了

2.还有就是经常看的关于事件顺序的问题：

不完全准确的结论（自认为）

ie:源事件元素->>父级元素事件->>body-->>document

moz:等其他浏览器与上面相反

先看一个例子：

<div onclick="clickBtn(event)"  style="width:100px;height:100px; background:#666;">
        <input id="Button1" type="button" value="button" onclick="alert('btn');" />
    </div>
    <script language="javascript" type="text/javascript">
        function clickBtn(event)
        {
            event=event?event:window.event;
            event.stopPropagation();
            alert("123");
        }
    </script>
</body>
</html>

如果按照上面的观点我现在点击button 事件从 body---->div----->button,,,,那么就是先alertbody然后再触发div弹出123,由于阻止冒泡，所以button的click不会触发。

但经过我们测试。moz还是按照由内向外触发。正确的执行alert("btn")--->>alert("123")----阻止冒泡不触发body的click事件

到这你是不是会怀疑上面不正确，不过上面的讲法对用addListenter和attachEvent添加的事件是正确的（）。如：

<ul id='ul'>
            <li id='li1'>List Item1</li>
            <li id='li2'>List Item2</li>
    </ul>
    <script language="javascript" type="text/javascript">
            function init(){
             if(!!document.all){
                document.getElementById('li1').attachEvent('onclick', function(event){
                    alert('li1');
                })
                document.getElementById('li2').attachEvent('onclick', function(event){
                    alert('li2');
                })
                document.getElementById('ul').attachEvent('onclick', function(event){
                    alert('ul');
                    //event.cancelBubble = true;
                    alert(event.stopPropagation);
                });
             }else{
                document.getElementById('li1').addEventListener('click', function(event){
                    alert('li1');
                }, true)
                document.getElementById('li2').addEventListener('click', function(event){
                    alert('li2');
                }, true)
                document.getElementById('ul').addEventListener('click', function(event){
                     event=event?event:window.event;
                     event.stopPropagation();
                     alert('ul');
                }, true);

              }
            }
            init();
    </script>
</body>
</html>

用这种方法是符合的。执行结果是触发ul的click事件然后由于阻止了冒泡所以此时你点击li时，其本身的click事件不触发。（顺便说一句，用这种动态添加事件的方法，好像 event.cancelBubble在moz中也有效了不过在chrome和moz中有区别

关于event.cancelBubble和event.stopPropagation（）的困惑相关推荐

event.stopPropagation/event.preventDefault()/event.cancelBubble等Event属性含义
Event 接口表示在 DOM 中出现的事件. event.bubbles: 返回一个布尔值,表明当前事件是否会向DOM树上层元素冒泡. event.cancelable: 只读属性 cancelab ...
event.cancelBubble=true e.stopPropagation() 取消事件处理，阻止事件
<tr><a href="xxx">连接</a></tr> 如上结构,单击tr的时候跳转至另一页 <tr style=&quo ...
event.cancelBubble与event.stopPropagation()
在火狐Firefox.opera.IE下阻止冒泡事件是不同的代码的,火狐下使用的是event.stopPropagation(),而IE下使用的是cancelBubble,jQuery 可以使用e.s ...
JS事件cancelBubble、event.preventDefault()与event.stopPropagation()简单介绍
推荐看原文:https://blog.csdn.net/iamlegendary/article/details/54409038 cancelBubble用于ie的阻止冒泡事件. event.sto ...
event.cancelBubble的理解
Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你 ...
关于event.cancelBubble
http://www.cnblogs.com/quanhai/archive/2010/04/15/1712277.html 由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个T ...
html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件（$event.cancelBubble=true；）
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation
Event.preventDefault() 取消浏览器对当前事件的默认行为. Event.stopPropagation() 阻止事件冒泡. Event.stopImmediatePropagati ...
event.cancelBubble=true 取消事件处理
<tr><a href="xxx">连接</a></tr> 如上结构,单击tr的时候跳转至另一页面 <tr style=&qu ...

关于event.cancelBubble和event.stopPropagation（）的困惑

关于event.cancelBubble和event.stopPropagation（）的困惑相关推荐

最新文章

热门文章