阻止事件冒泡最常用方法是调用 event.stopPropagation()，它中断冒泡阶段向上传播但不影响当前元素其他监听器执行，不阻止默认行为，需在事件处理函数中调用，兼容现代浏览器及IE9+。
在 JavaScript 中，阻止事件冒泡最常用的方法是调用事件对象的 stopPropagation() 方法。
使用 stopPropagation() 阻止冒泡
当事件（如点击）触发时，它会从目标元素逐层向上传播到父元素、祖先元素，直到 document。调用 event.stopPropagation() 可以立即中断这个向上传播过程，不影响当前元素上的其他监听器执行。
- 只影响冒泡阶段，不阻止捕获阶段（除非在捕获阶段调用）
- 必须在事件处理函数中调用，且在需要中断传播的位置
- 兼容所有现代浏览器和 IE9+
与 preventDefault() 的区别
stopPropagation() 和 preventDefault() 常被混淆，但作用完全不同：
-
stopPropagation()：阻止事件继续向上冒泡（不影响默认行为） -
preventDefault()：阻止元素默认行为（如 a 标签跳转、表单提交），但不阻止冒泡 - 两者可同时使用，互不干扰
实际例子
假设有一个按钮嵌套在 div 中：
<div id="outer"> Outer <button id="inner">Click me</button> </div>
绑定两个监听器：
document.getElementById('outer').addEventListener('click', () => {
console.log('Outer clicked');
});
document.getElementById('inner').addEventListener('click', (e) => {
console.log('Inner clicked');
e.stopPropagation(); // 加上这行，点击按钮时 outer 不会输出
});替代方案：使用事件选项 { once: true } 或检查 event.target
某些场景下，不一定要阻止冒泡，而是通过逻辑控制：
- 用
e.target === e.currentTarget判断是否是事件绑定的元素本身触发的 - 给监听器加
{ once: true }选项，让其只执行一次（适用于初始化类操作） - 对特定子元素显式忽略处理，避免误响应
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
