在 javascript 事件捕获与冒泡中，子元素阻止冒泡会直接切断事件向父元素的传播路径，导致父元素绑定的冒泡阶段监听器无法执行。具体做法是在子元素的事件处理函数中调用 event.stoppropagation() 方法。这样做后，事件在到达子元素后即被终止，不会继续向上冒泡至任何祖先元素，但不会影响父元素在捕获阶段已经执行的逻辑。
如何正确实现子元素阻止冒泡
要实现子元素阻止冒泡，需要在子元素的事件回调中获取事件对象并调用 stopPropagation()。这通常用于防止点击子按钮时触发父容器的点击行为。以下代码展示了标准的实现方式，其中 childBtn 的点击事件被拦截，而 parentDiv 的冒泡监听器不会被触发。
<div id="parentDiv">
<button id="childBtn">Click Me</button>
</div>
<script>
const parentDiv = document.getElementById('parentDiv');
const childBtn = document.getElementById('childBtn');
// 父元素冒泡阶段监听
parentDiv.addEventListener('click', () => {
console.log('Parent bubble triggered');
});
// 子元素点击处理
childBtn.addEventListener('click', (event) => {
console.log('Child clicked');
event.stopPropagation(); // 阻止冒泡
});
</script>
运行上述代码并点击按钮，控制台将仅输出 "Child clicked"，而不会输出 "Parent bubble triggered"。这验证了 stopPropagation() 成功阻断了事件向父元素的冒泡传播。
捕获阶段与冒泡阶段的差异影响
当子元素阻止冒泡时，它只影响后续未执行的事件传播阶段。如果父元素在捕获阶段绑定了监听器，该监听器会在事件到达子元素之前就已经执行，因此不受 stopPropagation() 的影响。这意味着捕获阶段和冒泡阶段是相对独立的，阻止冒泡并不能回退或取消已经发生的捕获阶段逻辑。
<div id="parentDiv">
<button id="childBtn">Click Me</button>
</div>
<script>
const parentDiv = document.getElementById('parentDiv');
const childBtn = document.getElementById('childBtn');
// 父元素捕获阶段监听
parentDiv.addEventListener('click', (event) => {
console.log('Parent capture triggered');
}, true); // true 表示捕获阶段
// 子元素点击处理
childBtn.addEventListener('click', (event) => {
console.log('Child clicked');
event.stopPropagation(); // 阻止冒泡
});
</script>
使用相同的输入点击按钮，控制台将输出 "Parent capture triggered" 和 "Child clicked"，但不会输出 "Parent bubble triggered"。这表明父元素的捕获阶段监听器正常执行，而冒泡阶段监听器因冒泡被阻止而未执行。此行为符合 W3C 事件流规范，即事件先向下捕获，再向上冒泡，中间阶段的操作只影响后续流程。
基于 stopPropagation() 对事件目标的影响
在子元素调用 stopPropagation() 后，事件的 target 属性仍然指向最初触发事件的子元素，而不是父元素。这是因为 target 属性记录的是事件发起的源头，而 currentTarget 属性记录的是当前正在处理事件的元素。即使冒泡被阻止，currentTarget 在子元素处理期间仍指向子元素本身，而在父元素（如果监听了捕获阶段）处理期间指向父元素。这种区分确保了开发者能准确识别事件来源和处理上下文。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
