stopPropagation()仅阻止事件冒泡，不影响同元素其他监听器执行和默认行为；它不作用于捕获阶段已触发的监听器，与preventDefault()功能独立。
在 JavaScript 中，stopPropagation() 用于阻止事件从当前元素向父级元素继续传播（即阻止冒泡），但它**不会影响当前元素上其他监听器的执行**，也不会阻止默认行为（如点击链接跳转需配合 preventDefault()）。
基本用法：在事件处理函数中调用
只要在事件回调里调用 event.stopPropagation()，就能中断冒泡路径：
document.getElementById('child').addEventListener('click', function(e) {
console.log('子元素被点击');
e.stopPropagation(); // ✅ 阻止事件继续向上冒泡
});
document.getElementById('parent').addEventListener('click', function() {
console.log('父元素被点击'); // ❌ 这行不会执行（当点击 child 时）
});
常见误区与注意事项
-
只影响冒泡阶段，不影响捕获阶段：如果父元素监听的是捕获阶段（第三个参数设为
true），它仍会在子元素之前触发；stopPropagation()会同时阻止后续的捕获和冒泡，但已触发的捕获监听器不受影响。 -
不能阻止同一元素上的其他监听器：比如给同一个按钮绑了两个
click监听器，调用stopPropagation()不会影响第二个监听器的执行。 -
和
preventDefault()是两回事：前者管“传播”，后者管“默认动作”。例如阻止表单提交需用preventDefault()；若只想阻止父级响应点击，用stopPropagation()即可。
替代方案：使用事件选项 once 或 capture 精准控制
现代写法中，可通过 addEventListener 的配置对象更精细地管理行为：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
{ once: true }：监听器执行一次后自动移除，适合一次性操作。 -
{ capture: true }：让监听器在捕获阶段触发，常用于在顶层拦截事件（如全局点击关闭弹窗），再配合stopPropagation()可避免干扰子组件逻辑。 -
{ passive: true }：主要用于提升滚动等事件性能，但注意它会让preventDefault()失效（与stopPropagation()无关）。
调试技巧：快速确认是否冒泡成功
可在各级父元素添加简单日志，观察控制台输出顺序：
立即学习“Java免费学习笔记（深入）”；
<div id="grandpa">
<div id="parent">
<button id="child">点我</button>
</div>
</div>
然后分别绑定 click 事件并打印各自 ID。加上 stopPropagation() 后，只有被点击元素的日志出现，上面的就不会输出。
