不知道自己这几天是怎么了，什么都不想做，很郁闷……
晚饭了小睡了一下，起来感觉好了一点，上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的个性。
分享到：
相关推荐
总结一下，`event.cancelBubble` 是 IE 的非标准方法，只在 IE 中有效，而 `event.stopPropagation()` 是 W3C 标准方法，适用于所有现代浏览器。理解这些差异可以帮助我们编写更加兼容和可靠的 JavaScript 代码。
在IE浏览器的事件模型中，事件的传播遵循一种称为“事件冒泡”的机制。...在现代浏览器中，尽管`event.cancelBubble`仍然可以工作，但为了更好的兼容性和一致性，推荐使用`event.stopPropagation()`。
在JavaScript中，我们经常需要阻止默认的浏览器行为和事件冒泡，以便实现自定义的功能。在前端开发中，由于浏览器的兼容性问题，理解和掌握这些技术至关重要。下面将详细介绍如何实现这两种功能。 1. **阻止浏览器...
在`onmouseover`和`onmouseout`事件中，`event.fromElement`用于获取鼠标离开的元素。这是个只读属性，提供前一个目标元素的信息。 7. `keyCode`属性： `event.keyCode`用于获取键盘事件对应的ASCII或Unicode字符...
在W3C的2级DOM事件标准中，引入了更多通用属性，如`event.bubbles`（判断事件是否冒泡）、`event.cancelable`（决定是否可以取消事件的默认行为）和`event.currentTarget`（当前处理事件的元素，不同于`event.target...
4. **兼容性处理**：考虑到不同浏览器对事件对象的支持不同，本示例中的代码同时支持IE和其他现代浏览器。 通过上述方法，我们可以有效地禁用特定的快捷键，为用户提供更加可控和友好的使用环境。这对于开发定制化...
JavaScript中的Event是处理用户交互或浏览器事件的核心机制。Event对象包含了与事件相关的所有信息，如触发事件的元素、事件类型、按键状态等。在JavaScript中，事件可以是用户的行为，如点击按钮、滚动页面，或者是...
在JavaScript中，`event`对象是浏览器提供的一个标准对象，用于表示用户与网页交互时发生的各种事件的状态。这些事件包括但不限于用户点击、移动鼠标、按下键盘等操作。`event`对象包含了关于事件的所有相关信息，...
`window.event` 对象是基于早期浏览器实现的一个标准，尤其是在IE浏览器中被广泛支持。尽管现代浏览器倾向于使用更符合W3C规范的事件模型，但在一些旧版或者特定环境下，`window.event` 仍然是非常有用的概念。下面...
在浏览器中，事件模型主要分为两种：IE的捕获模型和Firefox等其他浏览器采用的标准DOM事件流模型。由于这两种模型存在一定的差异，导致开发者在编写跨浏览器兼容的事件处理代码时面临诸多挑战。 - **IE事件模型**：...
- **IE与非IE浏览器的区别**：由于不同浏览器对事件模型的支持有所不同，这里通过判断`window.Event`是否存在来区分IE和其他浏览器，并采用相应的处理方式。 - **鼠标按键的识别差异**：在IE中，`event.button`的值...
在探讨JavaScript中如何处理鼠标点击事件时，首先需要了解不同主流浏览器（如Internet Explorer、Firefox和Opera）对于事件的处理差异。编写兼容各个浏览器的事件监听代码对于前端开发者而言是一项基本而重要的技能...
W3C标准的`event.stopPropagation()`被现代浏览器广泛支持，而IE浏览器则使用`event.cancelBubble = true;`。 ```javascript function stopPropagation(e) { var evt = e || window.event; if (evt....
event.cancelBubble = true; event.returnValue = false; return false; } } ``` 结合这两种方法可以更全面地防止鼠标右键被点击： ```javascript function rclick() { if (document.all) { // IE 特性...
因此，我们可以在事件处理函数中检查event.keyCode是否等于116，如果是，则阻止默认行为： ```javascript document.onkeydown = function() { if (event.keyCode === 116) { event.keyCode = 0; event....
**描述：** 在实际开发过程中，有时候我们需要阻止浏览器的某些默认行为，例如右键菜单、键盘快捷键等。通过使用JavaScript，我们可以轻松实现这些功能。 **示例代码解析：** 1. **禁用右键菜单：** ```...
在JavaScript中，`window`对象是全局对象，它是所有浏览器环境中可用的对象，代表了浏览器的整个窗口，包括文档和框架。这个对象提供了与浏览器窗口交互的各种方法和属性。本文将详细探讨`window`对象中的`event`...
event.cancelBubble = true; event.returnValue = false; return false; } } ``` ### 二、屏蔽特定键盘快捷键 为了防止用户通过键盘操作执行某些敏感动作（如刷新页面、打开新窗口等），可以通过监听`...
- 考虑更多浏览器特性差异，确保代码能在不同环境中稳定运行。 #### 五、总结 通过上述代码，我们能够有效地在网页中禁用鼠标右键功能。然而，在实际应用中需要注意，完全禁止用户的基本操作可能会带来用户体验上...