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


Posted in Javascript onDecember 11, 2011

首先我在网上看到不少文章大体上分为两个(不正确)观点:
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中有区别)
Javascript 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 #Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 #Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 #Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 #Javascript
一个简单的js树形菜单
Dec 09 #Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 #Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php中的登陆login实例代码
2016/06/20 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php批量修改表结构实例
2017/05/24 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python装饰器练习题及答案
2019/11/01 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python爬虫实现获取下一页代码
2020/03/13 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
计算机维护专业推荐信
2014/02/27 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书