关于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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
JavaScript实现五子棋小游戏
Oct 26 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
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
js Dom实现换肤效果
2017/10/21 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python算法学习之计数排序实例
2013/12/18 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python获取外网ip地址的方法总结
2015/07/02 Python
python cumsum函数的具体使用
2019/07/29 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
人民调解员先进事迹材料
2014/05/08 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python