onmouseenter/onmouseleave 不冒泡，只在鼠标真正进出元素边界时触发；onmouseover/onmouseout 基于目标变更，会在子元素间频繁触发导致闪烁。
onmouseenter 和 onmouseleave 从不冒泡，这是它们和 onmouseover/onmouseout 最本质的区别。如果你遇到悬停效果在子元素上反复触发、消失、又触发，八成是误用了 onmouseover 或 onmouseout。
为什么 onmouseenter/onmouseleave 不会冒泡
这两个事件只在鼠标“真正进入”或“真正离开”绑定元素的边界时触发，且严格限定于该元素自身的盒模型范围。即使鼠标从父元素移入子元素，只要没跨出父元素边界，onmouseenter 就不会再次触发；同理，onmouseleave 只在鼠标彻底移出整个元素（含所有后代）时才触发。
这背后是浏览器的「边界检测逻辑」：它会比较 event.relatedTarget 和当前元素的 DOM 关系，自动过滤掉在内部子树中移动的情况。
- 不响应子元素 hover 进出 —— 比如导航菜单里，鼠标在
<li>内划过多个<a></a>，只触发一次onmouseenter - 没有等价的捕获阶段事件 ——
addEventListener('mouseenter', handler, true)无效 - 无法用
stopPropagation()干预，因为压根没机会冒泡
onmouseover/onmouseout 为什么会“乱触发”
它们基于「目标元素变更」而非「区域进出」判断，只要鼠标指针落在任意后代节点上，就视为“移入”，哪怕只是从父 <div> 移到其内部的 <code><span></span> —— 此时 onmouseout 会先触发（离开父），紧接着 onmouseover 又触发（进入子），造成视觉闪烁或状态错乱。
- 典型症状：
console.log在嵌套结构中高频打印，下拉菜单闪退，Tooltip 突然关闭 - 错误写法：
<div onmouseover="show()" onmouseout="hide()"><button>点我</button></div>—— 鼠标移到 button 上就会hide() - 兼容性无问题，但语义错位：你想要“悬停容器”，它却理解为“悬停任意后代”
Vue / React 中的对应行为要特别注意
框架封装的 @mouseenter 和 @mouseleave（Vue）或 onMouseEnter/onMouseLeave（React）底层仍是原生事件，所以同样不冒泡。但很多人误以为它们像 @click 一样可以靠 .stop 修饰符控制冒泡 —— 实际上加了也无效，因为根本不存在冒泡路径。
- Vue 模板里写
@mouseenter.stop="handler"是冗余的，.stop不起作用 - React 中
onMouseEnter的 handler 里调用e.stopPropagation()同样无意义 - 真要阻止父级响应？只能靠条件判断，比如检查
e.target === e.currentTarget
什么时候必须用 onmouseover/onmouseout
极少数需要监听“任意层级进出”的场景，比如实现精确的热区统计、绘制鼠标轨迹、或做子元素级 hover 动画链。但这类需求本身已偏离常规 UI 悬停逻辑，应谨慎评估。
- 需要知道“鼠标刚进入哪个具体子节点” → 用
onmouseover+e.target - 要实现“父收起，但鼠标移到子菜单时不收” → 必须用
onmouseenter/onmouseleave，否则逻辑无法稳定 - 性能敏感场景：
onmouseenter触发次数远少于onmouseover，尤其在深层嵌套 DOM 中
真正容易被忽略的点是：这两个事件对「元素尺寸变化」极其敏感。如果悬停期间动态修改了元素宽高、padding 或 visibility，可能导致 onmouseleave 被意外触发 —— 因为浏览器重新计算了边界，把鼠标判定为“已移出”。这种边界抖动问题，调试起来比冒泡还难定位。
