关于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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
屏蔽script注入小例子
Nov 12 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
原生js实现滑块区间组件
Jan 20 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
实时获取Python的print输出流方法
2019/01/07 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
大学教师年终总结的自我评价
2013/10/29 职场文书
七年级生物教学反思
2014/01/30 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
2014年图书室工作总结
2014/12/09 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers