爱奇思

学习就是——从糊涂中慢慢走向清醒,然后再从清醒中慢慢走向糊涂,所以说我说它是一个O,只是圆的半径慢慢的扩大罢了!
posts - 60, comments - 128, trackbacks - 0, articles - 8
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

首先我在网上看到不少文章大体上分为两个(不正确)观点:

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