关于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 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
JS中min函数实例讲解
Feb 18 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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
ASP知识讲座四
2006/10/09 PHP
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php实现计数器方法小结
2015/01/05 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
详解Python 函数参数的拆解
2020/09/02 Python
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
个人求职信范例
2014/01/29 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
节能标语大全
2014/06/21 职场文书
公务员处分决定书
2015/06/25 职场文书
工作感言一句话
2015/08/01 职场文书
python如何在word中存储本地图片
2021/04/07 Python