欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-11-14 11:15:10
首先我在网上看到不少文章大体上分为两个（不正确）观点： 1. cancelbubble用于ie的阻止冒泡事件，event.stoppropagation（）用于firefox和chrome等其他。...

首先我在网上看到不少文章大体上分为两个（不正确）观点：
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" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body onclick="alert('body');">
<p onclick="clickbtn(event)" style="width:100px;height:100px; background:#666;">
<input id="button1" type="button" value="button" onclick="alert('btn');" />
</p>
<script language="javascript" type="text/javascript">
function clickbtn(event)
{
event=event?event:window.event;
event.stoppropagation();
alert("123");
}
</script>
</body>
</html>


如果按照上面的观点 我现在点击button 事件从 body---->p----->button,,,,那么就是 先alertbody然后再触发p弹出123,由于阻止冒泡，所以button的click不会触发。
但经过我们测试。moz还是按照由内向外触发。正确的执行alert("btn")--->>alert("123")----阻止冒泡 不触发body的click事件
到这你是不是会怀疑上面不正确，不过上面的讲法对用addlistenter和attachevent添加的事件是正确的（）。如：

. 代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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中有区别）。

上一篇： 2013款mac air及一体机安装win7 键盘鼠标失灵的解决方法

下一篇： iPad更新后显示连接iTunes画面怎么办？如何处理

推荐阅读