关于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代码改成这样时：复制代码代码如下: <script language="javascript" type="text/javascript"> function clickBtn(event) { event=event?event:window.event; event.stopPropagation(); alert("123"); } </script> 即可有效阻止。当然在chrome,opera中的 event.stopPropagation();也是有效的，结论一：以上说明 event.cancelBubble在新版本chrome,opera浏览器中已经支持，就差moz了，其实个人认为event.cancelBubble比event.stopPropagation()更好，不仅从英文意思上。所以希望moz再发新版本也支持。这样就兼容了 2.还有就是经常看的关于事件顺序的问题：不完全准确的结论（自认为） ie:源事件元素->>父级元素事件->>body-->>document moz:等其他浏览器与上面相反先看一个例子：复制代码代码如下: <!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');"> <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添加的事件是正确的（）。如：复制代码代码如下: <!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> <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中有区别）

　　推荐阅读

　　Javascript类定义语法,私有成员、受保护成员、静态成员等介绍

其实通俗的讲类就是对象的模板，为了增强JS的OO特性，受mootoos框架启发我们可以使用一个JSON对象来描述这个对象的模板。在这个模板中我们可以模拟实现私有成员，受保护成员，静态成员。这是一个在JS中模拟的类定>>>详细阅读

本文标题：关于event.cancelBubble和event.stopPropagation()的区别介绍

地址：http://www.17bianji.com/kaifa2/JS/23832.html

1/2 1