首选 event.stopPropagation()，它仅阻止事件冒泡而不影响默认行为和其他监听器；preventDefault() 仅阻默认行为，return false 则兼具两者且副作用大。
直接结论：用 event.stopPropagation()，不是 event.preventDefault()，也不是 return false —— 后两者要么不管用，要么副作用太大。
为什么 event.stopPropagation() 是首选
它只干一件事：切断当前事件往父级 DOM 节点的传播路径，不影响默认行为（比如表单提交、链接跳转），也不影响同一元素上其他监听器执行。这是最干净、最可控的方式。
常见错误现象：
- 点了按钮，结果外层
<div>的 click 也触发了（比如弹框没关、卡片被误激活） - 下拉菜单里点选项，菜单却立刻收起——因为点击事件冒泡到了菜单容器，触发了“点击外部关闭”逻辑
- 拖拽子元素时，父容器也进入了拖拽状态（
dragstart被双重触发）
使用场景包括：模态框内容区点击、卡片内操作按钮、嵌套可交互组件（如树形节点 + 展开图标）、自定义下拉/折叠控件。
立即学习“前端免费学习笔记（深入）”；
stopPropagation() 怎么写才不踩坑
必须在事件处理函数内部调用，且要在事件对象可用的前提下。注意以下几点：
- 监听器必须是通过
addEventListener绑定的，否则拿不到event对象（比如内联onclick="..."中需显式传参：onclick="handleClick(event)"） - 不能写在异步回调里（比如
setTimeout或 Promise.then），否则事件早已冒泡完毕，调用无效 - IE9 以下需兼容时，补一句
event.cancelBubble = true，但现代项目基本不用考虑 - 不要和
stopImmediatePropagation()混用——后者还会阻止同一元素上其他监听器，通常没必要
简短示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.getElementById('inner-btn').addEventListener('click', function(e) {
console.log('按钮被点');
e.stopPropagation(); // ✅ 关键就这一行
});
document.getElementById('outer-box').addEventListener('click', function() {
console.log('盒子被点'); // ❌ 点按钮时这行不会执行
});
别乱用 return false 和 preventDefault()
return false 在 jQuery 时代常用，但在原生 JS 里它等价于同时调用 preventDefault() + stopPropagation() —— 你很可能只需要后者。
preventDefault() 只阻止默认行为（如 <a> 跳转、<form> 提交），完全不碰冒泡链。误用会导致链接打不开、表单无法提交，而父级事件照常触发。
典型误用场景：
- 给按钮加
onclick="return false"想防重复点击，结果顺手把整个冒泡也掐了，导致外层监听器失效 - 在弹框确认按钮里调用
preventDefault()，以为能“阻止关闭”，其实只是阻止了默认提交，冒泡仍让背景 mask 的点击关闭逻辑生效
Vue / 微信小程序里怎么写更省事
框架封装了修饰符，比手动调 stopPropagation() 更直观，也更不容易漏掉：
- Vue 中用
@click.stop，例如：<button @click.stop="handleClick"> - 微信小程序用
catchtap替代bindtap，例如：<button catchtap="handleClick">—— 它底层就是自动调了stopPropagation() - React 中没有内置修饰符，仍需手动写
e.stopPropagation()，但要注意合成事件对象的复用机制（不过 v18 后已优化，一般不用e.persist()）
这些修饰符本质还是帮你调了 stopPropagation()，只是语法糖。理解底层原理，才能在需要精细控制时（比如只在特定条件下阻止冒泡）正确下手。
真正容易被忽略的是：冒泡只发生在**同类型事件**之间，比如 click 冒泡不会触发 mouseover；focus/blur 本身就不冒泡，强行调 stopPropagation() 没效果；还有，事件委托依赖冒泡，一旦阻止，委托监听就收不到子元素事件——该留口子的时候别一刀切。
