下面的代码会执行三次alert：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div onclick="alert('我是第一层')">
<div onclick="alert('我是第二层')">
<input type="checkbox" onclick="alert('checkbox的点击事件');"/>
</div>
</div>
</body>
</html>
加上停止冒泡的处理代码即可：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div onclick="alert('我是第一层')">
<div onclick="alert('我是第二层')">
<input type="checkbox" onclick="alert('checkbox的点击事件');event.stopPropagation();"/>
</div>
</div>
</body>
</html>
相关推荐
事件冒泡：当一个元素上的事件被触发时，同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素：任何一个事件的目标元素最开始的那个元素，并且它在我们的...
JavaScript中的事件是网页交互的核心，事件流和事件冒泡是理解事件处理机制的关键。事件流描述的是事件在DOM树中传播的顺序，分为两种模式：事件冒泡和事件捕获。 1. **事件流** - 事件流分为两种类型：事件冒泡和...
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件从最深的DOM节点开始，然后逐级向上层节点传播事件的过程。在这个过程中，每个节点都有机会触发绑定在其上的事件处理函数。事件冒泡机制使得我们可以在...
事件冒泡是事件在DOM树中的传播机制，即当一个元素上的事件触发后，它会沿着DOM树向上层元素传递。在jQuery中，可以通过`event.stopPropagation()`方法阻止事件继续冒泡，这有时是必要的，因为如果事件在一个元素上...
在JavaScript的世界里，事件冒泡是一个非常重要的概念，它描述了事件从最深的节点开始向上级节点传播的过程。在jQuery库中，开发者可以利用其提供的API来控制这一过程，特别是当需要阻止事件沿DOM树向上层元素传播时...
JavaScript中的事件处理机制包含两种模型：事件捕获与事件冒泡。 事件冒泡，顾名思义，是指事件像气泡一样从最内层的元素向上层元素传播的过程。当页面上的一个元素被点击时，不仅该元素上的事件处理器会被触发，其...
这样，当事件冒泡到父级元素时，由于事件目标匹配到指定的选择器，事件处理器就会被触发，然后我们可以在这个处理器里调用`e.stopPropagation()`来阻止事件继续冒泡到更上层的元素。 例如，如果我们要绑定点击事件...
事件冒泡是指事件从最内层元素向上层元素传播，使得祖先元素也能接收到相同的事件。这在很多情况下是有益的，但有时也需要阻止冒泡，如使用`event.cancelBubble = true`来实现。 五、事件委托（Delegation） 事件...
综上所述，JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点，它们在处理复杂的事件监听和避免不必要的事件触发时发挥着重要的作用。理解并掌握这些技术对于提升前端开发的交互体验与代码质量具有重要意义。
在JavaScript中，阻止事件冒泡有多种方式。对于不支持捕获的老版本IE浏览器，可以使用`window.event.cancelBubble = true`，而在其他浏览器中，使用`event.stopPropagation()`即可。jQuery库提供了便捷的API，例如`...
这在早期的jQuery或JavaScript中较为常见。如： ```javascript $("#sub").bind("click",function(event){ // ... 省略其他代码 ... return false; // 这行代码同时调用了 event.preventDefault() 和 event....
事件冒泡和事件捕获是JavaScript中处理事件的两种机制，它们决定了事件的触发顺序，从而影响事件处理函数的执行顺序。 在DOM标准中，事件流分为三个阶段：事件捕获、目标阶段和事件冒泡。 1. 事件捕获阶段：事件从...
本文实例讲述了javascript事件监听与事件委托。...事件委托需要用到事件的冒泡，冒泡就是事件发生时，上层会一层一层的接收这个事件。 如下页面结构： <body> <button>按钮</bu
在JavaScript中，事件的传播分为两个阶段：捕获阶段和冒泡阶段。 **捕获阶段**（Capture Phase）：当事件发生时，浏览器会从最外层的DOM节点（如`document`）开始，沿着DOM树向下传递事件，直到到达事件实际发生的...
2. jQuery中如何阻止事件冒泡 3. jQuery中如何模拟触发事件 首先，了解什么是事件冒泡。当用户在页面上进行点击、鼠标移动等操作时，这些操作会产生一个事件，这个事件会从最内层的元素开始，逐步向上传播至最外层...
这个事件从原始元素开始一直冒泡到DOM树的最上层。目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把...
在JavaScript中，事件可以沿着DOM（文档对象模型）的层次结构向下传播，这个过程被称为事件冒泡。事件冒泡意味着事件首先在最深的节点上触发，然后逐级向上层元素传递。有时，我们可能希望阻止这种冒泡行为，或者...
链接中的博客文章详细介绍了如何自定义`ViewGroup`来实现特定的事件处理逻辑，例如在滑动子`View`时防止事件冒泡，或者在`ViewGroup`内实现复杂的触摸行为。 8. **实际应用** 在开发中，理解事件传递机制对于创建...
事件冒泡是JavaScript中的一种机制，当一个元素上的事件被触发后，该事件会沿着DOM树向上层元素传播，直到根节点。这种机制允许父元素捕获到在子元素上发生的事件。在某些情况下，事件冒泡可以非常有用，比如在给定...