如下面代码
<div onclick=foo()>
<input type="button" value="test" onclick=bar()>
</div>
当点按钮时，容器的onclick事件也会执行。有人把这种现象叫做冒泡。冒泡包括向上的或向下的。解决上面出现问题的方法在ie里只需要在bar()方法里加入 event.cancelBubble = true; 就可以了。
下面是从http://bbs.blueidea.com/thread-2855697-1-1.html得到的在firefox和ie中都可以运行的例子
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
.adang{width:200px;height:50px;background:green;color:#fff;line-height:50px;text-align:center;margin-bottom:10px;}
</style>
<script type="text/javascript">
function cancleEventUp(oevent){
if(document.all) window.event.cancelBubble=true;
else oevent.stopPropagation();
}
document.onclick=function(){
alert("冒泡到document了");
}
</script>
</head>
<body>
<div class="adang" onclick="alert('阿当是帅哥');">点击我(不阻止冒泡)</div>
<div class="adang" onclick="alert('阿当是帅哥');cancleEventUp(event);">点击我(阻止冒泡)</div>
</body>
</html>
- test.rar (643 Bytes)
- 描述: 上面例子的html文件
- 下载次数: 10
分享到：
相关推荐
- **阻止事件的默认行为**：通过`event.preventDefault()`防止默认的浏览器行为，例如阻止链接跳转、表单提交等。 实验内容覆盖了以下几个方面： - **JavaScript事件注册**：通过`addEventListener`或`...
- `event.stopPropagation()`：阻止事件继续向上冒泡，防止父级元素的事件处理函数被执行。 - `event.stopImmediatePropagation()`：阻止同一元素上的其他事件处理函数执行。 理解并熟练运用JavaScript的事件和事件...
2. `event.stopPropagation()`：阻止事件继续冒泡或捕获，防止父元素的事件处理程序被执行。 六、自定义事件 JavaScript允许创建自定义事件，通过`new Event()`或`new CustomEvent()`构造函数，然后使用`...
`event.stopPropagation()`可以防止事件继续向上层元素传播，即阻止事件冒泡。 七、事件委托 事件委托是一种优化策略，通过在父元素上监听事件，根据事件源判断是否执行相应的处理，减少事件监听器的数量，提高...
事件冒泡是指事件从最深的节点开始，逐级向上层节点传播事件。事件捕获则是从最外层节点开始向下传播。在DOM2级事件模型中，可以设置`useCapture`参数决定事件处理顺序。 五、事件对象 每个事件触发时都会创建一个...
通过`event.stopPropagation()`和`event.stopImmediatePropagation()`，我们可以防止事件在DOM树中向上传播，或者阻止同一元素上其他事件处理器的执行。理解和熟练使用这些方法对于编写高性能、可维护的前端代码至关...
而`event.preventDefault()`则阻止事件的默认行为，例如阻止表单提交或者链接跳转，但不影响事件的进一步传播。 在实际编程中，我们还需要关注内存管理和性能优化。事件监听器会增加内存消耗，如果不再需要它们，...
为了防止事件冒泡，可以使用`event.stopPropagation()`方法，阻止事件继续向上冒泡；而`event.stopImmediatePropagation()`不仅可以阻止冒泡，还能阻止同一元素上的其他事件处理程序被执行。 在实际应用中，事件...
总结一下，JavaScript中的事件处理包括事件的冒泡、捕获和目标传播，通过`event.stopPropagation()`可以中断事件的进一步传播，防止事件到达其他事件监听器。而`event.preventDefault()`可以取消事件的默认行为，如...
事件冒泡是指事件从最深的节点开始，逐级向上层节点传播事件。而事件捕获则相反，从最外层的祖先节点开始，向下到目标节点。在JavaScript中，这两种模式可以同时存在，事件捕获先于事件冒泡执行。 "扣代码工具 ...
可以通过`stopPropagation()`方法来阻止事件冒泡，防止事件向上层元素传播。 #### 四、事件对象 事件对象提供了有关事件的信息，例如事件类型、触发事件的目标元素等。常用的事件对象属性包括： - `...
JavaScript中的事件处理是Web开发中的核心概念，它涉及到事件的传播、取消默认行为以及阻止事件传播等关键点。本文将详细解析这些概念。 首先，**事件处理程序的返回值**在JavaScript中扮演着一个特殊的角色。当...
在JavaScript中，事件传播是DOM元素之间的一种交互方式，它分为三个阶段：捕获阶段、目标阶段和冒泡阶段。事件传播模型允许事件从最深的节点（事件目标）向上冒泡到最外层的节点（文档）。在这个过程中，每个节点都...
- **动态性**：JavaScript支持事件驱动模型，能够根据用户的交互立即响应，无需等待服务器处理请求。这种即时反馈提高了用户体验。 - **跨平台性**：JavaScript不依赖于特定的操作系统或浏览器版本，只要支持...
标题中的“NativeJS随记 - 浅析...总之，JavaScript事件是构建动态Web应用的关键，理解并熟练运用事件监听、触发、传播、事件对象和事件委托等概念，能够帮助我们编写出响应用户操作、提升用户体验的高效代码。
事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上层节点传播事件的过程。例如，当用户点击一个按钮（最具体的元素），该点击事件首先被按钮接收到，然后依次传递给它的父...
5. **停止事件传播（Stopping Propagation）**：使用`event.stopPropagation()`可以防止事件继续向上冒泡，防止上级元素的事件处理函数被调用。 6. **事件委托（Event Delegation）**：这是一种高效的处理动态生成...
4. **事件冒泡与捕获**：onfire.js可能支持这两种事件传播模式，帮助开发者控制事件处理的顺序。 5. **事件解除**：`.off()`方法可能用于移除已经注册的事件监听器，防止内存泄漏。 6. **事件对象**：在事件处理函数...
JavaScript事件模型是编程中至关重要的概念，特别是在网页交互和用户界面设计中。本文将详细介绍三种主要的事件模型：原始事件模型、DOM2事件模型以及IE事件模型，并探讨它们的差异和使用方法。 首先，原始事件模型...