关于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中有区别