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

最新推荐文章于 2018-05-16 09:38:00 发布

onlyaisha

最新推荐文章于 2018-05-16 09:38:00 发布

阅读量740

点赞数

来源：http://www.jb51.net/article/29106.htm

首先我在网上看到不少文章大体上分为两个（不正确）观点：
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 οnclick="alert('body');"> 
<input id="Button1" type="button" value="button" οnclick="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 οnclick="alert('body');"> 
<div οnclick="clickBtn(event)" style="width:100px;height:100px; background:#666;"> 
<input id="Button1" type="button" value="button" οnclick="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中有区别）

IE FireFox 兼容之 window.event

http://dbear.iteye.com/blog/814509

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function testEvent(){
  var target = window.event.srcElement ;
  document.getElementById('result').innerHTML = target.tagName;
}
</script>
</HEAD>
<BODY>
<div id="result"></div>
<input type="button" value="点我" οnclick="javascript:testEvent()"/>
</BODY>
</HTML>

这段代码在IE浏览器下的效果是，点击按钮，页面上显示“input”。但是在FireFox下点击按钮则会报错：window.event is undefined。这是因为在FireFox下window.event 只能在事件发生的现场使用，也就是说，event变量必须在方法调用处被传入。再看下面的代码。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function testEvent(number,ev){
  var target = ev.srcElement || ev.target;
  document.getElementById('result').innerHTML = target.tagName+ number;
}
</script>
</HEAD>

<BODY>
<div id="result"></div>
<input type="button" value="点我" οnclick="javascript:testEvent(20,event)"/>
<script type="text/javascript">
//testEvent();
</script>
</BODY>
</HTML>

上面的代码在IE和FireFox下执行都能生效，且效果相同。上面的代码有几处需要注意：

1、传入调用方法的event变量一定要是“event”，其它字符不能代替。但是位置不限。

2、event变量的点击对象获取在IE和firefox下也是不同的。IE下使用 .target获取，FireFoxe则要使用.srcElement获取。

其它兼容性问题

1、IE中 event对象有x,y属性，没有pageX,pageY属性；FireFox中有pageX,pageY属性，没有x,y属性。

2、待续。。。

onlyaisha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于event.cancelBubble和event.stopPropagation()的区别介绍

来源：http://www.jb51.net/article/29106.htm首先我在网上看到不少文章大体上分为两个（不正确）观点： 1. cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器。先不讲上面是对是错先看一个例子：（测试环境：chrom5.0.275.7, moz3.6.4,
复制链接

扫一扫