event.stoppropagation()是最常用、最可靠的阻断事件冒泡方式，适用于click等冒泡事件，但不适用于click与dblclick混用场景，也无法解决mouseenter/mouseleave误触发问题。
直接结论：用 event.stopPropagation() 阻断冒泡，是最常用、最可靠的方式；但要注意它不适用于 click 和 dblclick 混用的场景，也不能解决 mouseenter/mouseleave 的误触发问题。
为什么 event.stopPropagation() 是首选
父容器和子元素都绑了 click 事件时，点击子元素会先触发子元素的 handler，再“冒泡”到父元素——这正是干扰的根源。调用 event.stopPropagation() 能立刻切断这条向上传播路径。
- 只影响当前事件流，不影响其他事件（如
keydown或后续的click） - 兼容所有现代浏览器及 IE11+
- 无需改 HTML 结构或 CSS，侵入性最小
- 比依赖
event.target === parent更鲁棒——后者在子元素含空白文本节点、伪元素或 shadow DOM 里容易失效
但 event.stopPropagation() 解决不了 mouseenter/mouseleave 重复触发
当鼠标从父 button 移入其内部 img 时，浏览器会先发 mouseleave（离开 button），再发 mouseenter（进入 img），如果父级监听器用了捕获阶段（addEventListener('mouseenter', fn, true)），就可能被再次匹配到，造成“悬停不动却反复触发”。
- 优先检查是否误传了
true作为第三个参数（即启用了捕获）；改成false或省略即可回归标准冒泡行为 - 对子元素（如
img）加pointer-events: none，让它彻底不参与鼠标事件判定——适合仅作装饰、无交互需求的子内容 - 避免在
mouseenter中依赖e.target判定来源，改用e.currentTarget确保始终指向绑定事件的父元素
Vue 场景下子元素 click 干扰父元素 dblclick
@click.stop 对 dblclick 无效，因为 click 和 dblclick 是两个独立事件，浏览器先发两次 click，再发一次 dblclick。快速双击子元素时，父级仍会收到 dblclick。
- 在子元素上显式声明空
@dblclick.prevent，拦截并阻止其冒泡 - 或改用防抖逻辑：在父级
dblclickhandler 中记录时间戳，若上一次 click 在 300ms 内，则忽略本次 dblclick - 不要试图用
event.stopPropagation()绑在子元素的 click 上来“预防”dblclick——它完全不生效
容易被忽略的边界情况
有些干扰不是来自事件传播，而是 DOM 定位或样式导致的“视觉可点击区域错位”。比如子元素用了 position: absolute 且超出父容器范围，用户点在溢出部分时，实际 event.target 是子元素，但视觉上以为点在父容器空白处。
- 检查子元素是否设置了
pointer-events: auto（默认值），若不需要响应，设为none更安全 - 父容器若设了
overflow: hidden，要确认子元素的绝对定位没有被意外裁剪，否则用户点不到它，反而误触父级 - 移动端需额外注意：
touchstart同样遵循冒泡规则，stopPropagation()对它同样有效，但别漏掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
