事件冒泡是什么？怎么阻止传播？

注意：不是所有事件都冒泡（如 focus、blur、mouseenter、mouseleave 默认不冒泡），但常用的 click、mousedown、keydown 等都支持冒泡。

如何阻止事件冒泡

用 event.stopPropagation() 方法可以立即中断当前事件的后续冒泡过程，只影响当前这次事件流，不影响其他事件或同一元素上的其他监听器。

• 写法简单：event.stopPropagation() 放在事件处理函数里即可
• 兼容性好：现代浏览器和 IE9+ 都支持
• 注意：它不会阻止同一元素上其他监听器的执行（想阻止用 stopImmediatePropagation()）

还有哪些相关控制方法

除了阻止冒泡，还有两个常被混淆但用途不同的方法：

• event.preventDefault()：阻止事件的默认行为（比如点击链接不跳转、表单不提交），和冒泡无关
• event.stopImmediatePropagation()：既阻止冒泡，也阻止该元素上**其余同类型事件监听器**的执行
• 设置 addEventListener 的第三个参数为 true（捕获阶段）也能绕开冒泡逻辑，适合从外往内响应

实际中什么时候该阻止冒泡

典型场景包括：

• 下拉菜单点击内部选项时，不希望同时关闭整个菜单（菜单容器和选项都有 click 监听）
• 模态框（Modal）中点击内容区域，不希望触发背后遮罩层的关闭逻辑
• 表格行内有删除按钮，点击按钮时只删数据，不触发整行的选中行为

基本原则：当子元素和父元素对同一事件有不同意图时，就在子元素处理中调用 stopPropagation()。

基本上就这些。掌握冒泡机制和 stopPropagation() 的使用，能帮你写出更可控、不易误触发的交互逻辑。

到这里，我们也就讲完了《事件冒泡是什么？怎么阻止传播？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于事件冒泡,事件传播的知识点！