不知道自己这几天是怎么了，什么都不想做，很郁闷……
晚饭了小睡了一下，起来感觉好了一点，上JE博客瞎逛，看了些博客，觉得挺有意思。
刚看到这么篇
博客，文中主要内容是：虽然cancelBubble不是w3c标准，但chrome也支持事件的cancelBubble。但作者好像把cancelBubble和stopPropagation的作用混起来了。在我的印象中，cancelBubble
只是阻止事件冒泡的，但事件的传播方式除了“冒泡”还有“捕获”，stopPropagation是用于
同时阻止事件的冒泡和捕获。像文中作者所说的一样：从字面上就应该可以看出这两者的意思，cancelBubble的字面意思是取消冒泡，stopPropagation的字面意思是停止传播。
为了证实我的想法，我特意写了一小段代码来试验，试验的结果却很意外：
<html>
<head>
<script>
function init(){
document.getElementById('ul').addEventListener('click', function(event){
alert('ul');
event.cancelBubble = true;
}, true);
document.getElementById('li1').addEventListener('click', function(event){
alert('li1');
}, true)
document.getElementById('li2').addEventListener('click', function(event){
alert('li2');
}, true)
}
</script>
</head>
<body onload="init();">
<ul id='ul'>
<li id='li1'>List Item1</li>
<li id='li2'>List Item2</li>
</ul>
</body>
</html>
因为我给这3个元素注册的事件都是捕获型（addEventListener最后一个参数为true），但我只阻止了UL元素click事件的冒泡，并没有阻止捕获，所以如果cancelBubble真的按照我的想法工作，那么当我点击List Item1的时候，应该先弹出一个内容为“ul”的提示框，然后再弹出一个内容为“li1”的提示框，也就是说这个cancelBubble在这里应该没有作用。我试验时使用的是FireFox3.0.11，当我点击List Item1的时候，意外发生了：只弹出了一个内容为“ul”的提示框。
既然最先触发的是UL元素的click事件，那么这个事件就是捕获型的，这一点应该错不了。看来是我错了，cancalBubble的作用跟stopPropagation一样。不过这样的结果让我比较接受不了：cancelBubble的字面意思分明就是“取消冒泡”嘛，捕获型事件关它什么事？我又一想，在Chrome中它会不会有不同表现？于是我在Chrome上运行了这段代码，结果跟我之前预想的一样，先弹出“ul”，接着弹出“li1”。我又把这句event.cancelBubble=true换成event.stopPropagation()，事件的捕获就被阻止了，无论点击List Item1还是List Item2，弹出的都只有一个“ul”。
嗯，非标准的东西还是少用为好，我讨厌IE的个性。
分享到：
相关推荐
cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器。 先不讲上面是对是错 先看一个例子：（测试环境：chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8） 代码如下: <...
停止冒泡通用方法： function stopBubble(e) { ... window.event.cancelBubble = true; } 阻止浏览器默认行为-通用方法 //阻止浏览器的默认行为 function stopDefault( e ) { //阻止默认浏览器动作(W3C) if
1.阻止事件冒泡,使成为捕获型事件触发机制. ... window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为. //阻止浏览器的默认行为 functi
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....
代码如下: var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent(“on”+type,(function(){ return function(event){ window.event.cancelBubble=true;//停止时间冒泡 object...
取消浏览器对事件的默认行为（响应）（比如标签的跳转等）并停止事件的继续传播。 实现代码 代码如下: function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault()...
标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播，而ie8-用e.cancelBubble属性来阻冒泡，注意ie9不支持cancelBubble属性（设置后不生效），但chrome、safari、opera、firefox都支持cancelBubble...
1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递 Event 常见属性： clientX clinetY 鼠标相对客户端的位置 ...
一旦事件发生,便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的 event对象。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只...
window.event.cancelBubble = true; } }, // 阻止事件默认浏览器行为 stopDefault : function(ev) { // w3c标准 if (ev && ev.preventDefault) { ev.preventDefault(); } // ie ...
注意：js中的方法可以直接写在代码中，不需要“类”包裹 使用方法：方法名()-->方法调用-->立即执行 2.js文件：网页外专门保存js脚本的文件--推荐 强调：HTML、CSS、JS都要使用UTF-8编码保存(window系统) ...
比如，停止事件冒泡IE用 cancelBubble ，标准浏览器则用 stopPropagation 。 获取事件源对象，IE用 srcElement ，标准浏览器则用 target 诸如此类。 jQuery 对原生事件对象的修复和包装主要使用 jQuery.Event 类和 ...
在触发dom上的事件是都会产生一个事件对象event。例如鼠标点击的时候，自己就会产生比如点击的类型啊 还要那个元素发出的 dom 事件对象 type 属性用于获取事件对象， target属性 用于获取事件目标，stopPropagation...
2、cancelBubble属性为true，对于IE浏览器， 而Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation(); 代码如下: <style> body { background:black; } #myDiv { background: #fff; width:250px; ...
首先看下JS的事件模型，...而Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script type=text/javascript src
47、JS WINDOW.EVENT.CANCELBUBBLE 事件冒泡 323 48、JS解决COOKIE跨域访问的问题之方法一 323 49、JS禁止复制网页代码 324 50、JS 禁止剪切、复制、粘贴的文本框代码 326 51、如何禁止火狐浏览器的右键功能 327 52...