调用 e.stoppropagation() 可阻止子元素点击事件冒泡至父级，仅需在有独立行为的控件（如点赞按钮）中使用；vue 用 @click.stop，react 用 e.stoppropagation()；勿混淆 preventdefault()；需检查事件绑定合理性及动画与事件解耦。
直接在子元素的点击事件里调用 e.stopPropagation()，就能阻止它向上触发父级的点击事件。这是最常用、也最有效的做法，不需要改结构或加额外样式。
只在需要的地方阻断冒泡
不是所有子元素都要拦截，只对那些有独立行为的控件（比如点赞按钮、展开箭头、关闭图标）才调用 stopPropagation()。其他区域（如卡片空白处）仍可正常触发父级逻辑。
- 给按钮绑定 click 时，在 handler 开头写
e.stopPropagation() - 避免在父容器上统一拦截，否则会误伤正常交互
- Vue 中可用
@click.stop，React 中用e.stopPropagation()
别和 preventDefault 混用
stopPropagation() 只管传播路径，不影响默认行为；preventDefault() 是阻止浏览器默认动作（比如链接跳转、表单提交）。两者目的不同，不要因为想“阻止父级”就顺手加 preventDefault——除非你真要禁掉默认行为。
- 点击按钮弹窗？只需
stopPropagation()，不用preventDefault() - 点击链接不跳转？才需要
preventDefault() - 两个一起用也没错，但得清楚各自作用
检查事件绑定位置是否合理
有时候“父级被触发”不是冒泡问题，而是事件绑错了地方。比如把 click 绑在整张卡片上，又把按钮放在里面，结果一点按钮就激活卡片——这本质是设计问题。
- 确认父级事件监听器确实绑在该父元素上，而不是更外层容器
- 如果父级本不该响应点击，就别给它绑 click，而用其他方式实现效果（如 hover 或 focus）
- 结构上让可点击区域职责清晰：卡片整体跳转，按钮单独点赞，区域尽量不重叠
动画与事件分离更稳妥
点赞、展开这类操作常伴随动画，如果动画逻辑和 click 事件耦合太紧（比如靠 event 持续存在来控制），容易因冒泡干扰导致状态错乱。
- 点击后立刻设
button.disabled = true或加 loading 类，防连点 - 动画用 CSS transition 或 Web Animations API 实现，JS 只负责开关状态
- 计数更新等逻辑，放在
stopPropagation()之后执行，不依赖事件流
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
