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


首先我在网上看到不少文章大体上分为两个(不正确)观点:
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中有区别)



相关阅读:
Jquery 扩展方法
网页制作实例:图片真正居中的方法
checkbox 复选框不能为空
关于ASP.NET在IIS一些问题经验总结
asp.net(c#)ref,out ,params的区别
双系统计算机怎样卸载其中一个?
Oracle10g新特性——正则表达式
ASP在线创建Word与Excel文档
JavaScript判断窗口是否最小化的代码(跨浏览器)
mssql 两种数据插入方式
php学习 字符串课件
在64位Linux环境下安装Oracle数据库10g
脱离Linux新手十要点
AJAX、AJAX实例及AJAX源代码
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 镖与靶作文300字 他的微笑作文500字 八年级语文课文读后感 20165年级元旦主持词 在青年文明号负责人代表座谈会上讲话 小学六年级作文700字:20年后的珠海 自测:你的工作态度是怎样的? 尚志社区人大代表联络站2012年工作总结 2014党章学习活动总结 关于社区卫生服务中心的调研思考 你觉得这样你开心吗...? 日记一则(1) 未来的世界 可怜的茶叶蛋 2016三八妇女节祝福语妈妈 美丽的南滨路 穿雨衣原来挺舒服的呀! 趣味运动会作文1300字 高中高三作文1000字:身残决不坠志 海鲜节暨国际经贸洽谈会开幕辞 学校挂职锻炼体会 愿做一支笔作文1200字 我眼中的最美作文 关于诸葛亮的俗语 总要摒弃一些东西 《井底之蛙》续写作文300字 在统战委员培训班上的讲话 在你心里,我不如她 看图写话 水枪战-宫佳豪 午夜里流淌于指尖的绚烂年华 “公正”二字重千钧 党员中层干部保持先进性的“八好”标准要求 怎样写好开学典礼作文 冬日里的慰藉 我的小猫“咪咪”550字 2015高二生入党申请书 我喜爱的一害——老鼠 2016对党的认识思想汇报 磨难是我们的精神财富 红尘邂逅 你不紧张我,那就离我远点 初中初二作文500字:美。讲的似乎很简单,但是真正的美,你又发现过吗? 无限恐怖—死亡擦肩而过作文3000字 一杯牛奶作文500字 团干竟聘报告竞职演讲 停得下的雨,忍不住的念 2017年调度员工作总结 让我们学会独立读《桃花心木》有感300字 在劳动保障局机关作风建设动员大会上的讲话 我为家乡拍照片

Copyright © 2016 phpStudy |