首先我在网上看到不少文章大体上分为两个（不正确）观点：
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中有区别）
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中有区别）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“关于event.cancelBubble和event.stopPropagation()的区别介绍”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。