首页 > 建站教程 > JS、jQ、TS >  关于event.cancelBubble和event.stopPropagation()的区别介绍正文

关于event.cancelBubble和event.stopPropagation()的区别介绍

event.cancelBubble=true和event.stopPropagation()都是javascript中阻止事件冒泡的属性和方法,网上看到不少对两者区别进行分析的文章,大体上分为两个(不正确)观点:

观点一、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>event.cancelBubble和event.stopPropagation()的区别测试 - 我爱模板网 www.5imoban.net</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> 

经过测试:
    1、chrom5.0.275.7, opera10.53, ie6,7,8在这几个浏览器中,cancelBubble是有效的,并且可以阻止事件冒泡,使body的onclick不能触发。只触发button的click alert(event.cancelBubble); 输出结果true
    2、在 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再发新版本也支持。这样就兼容了

观点二、还有就是经常看的关于事件顺序的问题:

不完全准确的结论(自认为)

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>事件顺序测试 - 我爱模板网 www.5imoban.net</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中有区别)