stoppropagation、cancelBubble区别(阻止冒泡)

事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

语法：e.stopPropagation();

参数e：表示事件传递的参数，代表事件的状态。
[html] view plain copy

    <html>  
    <head>  
        <title>冒泡测试</title>  
    </head>  
    <body onclick="alert('body');">  
      
        <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("OK");  
            }  
        </script>  
    </body>  
    </html>

阻止事件冒泡stopPropagation的兼容写法

function stopPropagation(e){
    e=window.event||e;
    if(document.all){  //只有ie识别
        e.cancelBubble=true;
    }else{
        e.stopPropagation();
    }
}

cancelBubble 检测是否接受上层元素的事件的控制。

语法： event.cancelBubble[ = cancelBubble]
可能的值：这是一个可读写的布尔值:
true 不被上层元素的事件控制。
false 允许被上层元素的事件控制。这是默认值。

事件捕获其实有三种方式，事件冒泡只是其中的一种：

（1）IE从里到外（inside→outside）的冒泡型事件。
（2）Netscape4.0从外到里（outside→inside）的捕获型事件。
（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法。

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。

事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。

阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

最后编辑于：2017.11.23 16:29:39