事件冒泡是DOM事件默认的传播行为，指事件从触发元素逐级向上传播至document或window；可通过event.stopPropagation()阻止冒泡，e.stopImmediatePropagation()还可阻止同元素其余监听器执行。
JavaScript 中事件冒泡是 DOM 事件的默认传播行为：事件从触发元素开始，逐级向上传播到父元素、祖先元素，直到 document（或 window）。它不是“手动实现”的机制，而是浏览器原生支持的特性；我们主要做的是**理解它、利用它、必要时阻止它**。
事件冒泡是怎么工作的？
当你点击一个嵌套结构中的子元素，比如：
<div id="outer">
<div id="middle">
<button id="inner">点我</button>
</div>
</div>
点击 <button> 后，事件会按顺序触发：
-
button上的 click 处理函数（捕获阶段未启用时，先在目标阶段执行） -
middle上的 click 处理函数（冒泡阶段） -
outer上的 click 处理函数 - 最后到
document
这是浏览器自动完成的，无需额外代码。冒泡让“事件委托”成为可能——你只需在父容器监听一次 click，就能处理所有子元素的点击，即使它们是后续动态添加的。
立即学习“Java免费学习笔记（深入）”；
如何阻止事件冒泡？
在事件处理函数中调用 event.stopPropagation() 即可中断冒泡过程，阻止它继续向上传播：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
document.getElementById('inner').addEventListener('click', function(e) {
console.log('按钮被点了');
e.stopPropagation(); // ✅ 阻止冒泡
});
此时点击按钮，middle 和 outer 的 click 回调将不会执行。
注意：stopPropagation() 不影响同一元素上其他同类型事件监听器的执行（除非用了 once: true 或已移除），只影响传播路径。
还有哪些相关控制方法？
除了阻止冒泡，还有两个常用配套方法：
-
e.stopImmediatePropagation()：不仅阻止冒泡，还立即终止当前元素上**其余同类型监听器**的执行（比stopPropagation更彻底） -
e.cancelBubble = true：IE8 及更早版本的兼容写法（现代代码一般不用，但读旧项目可能遇到）
另外，若想完全禁用某元素的事件响应（包括捕获和冒泡），可用 pointer-events: none CSS 属性，但这属于样式层面的屏蔽，不是 JS 事件控制逻辑。
什么时候该阻止冒泡？
常见合理场景包括：
- 下拉菜单中，点击菜单项时不希望同时触发外层遮罩层的关闭逻辑
- 模态框内部表单提交，避免误触背景区域导致模态框关闭
- 自定义右键菜单，防止触发浏览器默认右键菜单或父级上下文操作
⚠️ 注意：不要无差别阻止冒泡。过度使用会破坏事件委托、影响可访问性（如屏幕阅读器依赖事件传播），也增加调试难度。
