onmouseenter/onmouseleave 不冒泡且仅边界穿越时触发，onmouseover/onmouseout 会冒泡并频繁触发；现代开发优先使用前者，react/vue 中对应 onmouseenter/onmouseleave 和 @mouseenter/@mouseleave。
onmouseover 和 onmouseenter 看似都能做“悬停效果”，但只要 DOM 里有子元素，行为就完全不同——根本区别不在“进不进”，而在“冒不冒泡”。
onmouseover 触发频繁且会冒泡
只要鼠标指针进入目标元素或其任意子节点，onmouseover 就会触发。哪怕只是从父 div 移到内部的 span，也会再次触发父级的 onmouseover，因为事件沿 DOM 向上冒泡。
常见错误现象：
- 悬停菜单反复闪动、展开又收起
- 控制台打印多次 “鼠标移入”，实际只进了一次父容器
- 子元素上绑定的
onmouseover意外触发了父级逻辑（比如提前关闭弹层）
适用场景：
- 需要监听整个区域（含子树）所有“悬停进入”动作时
- 配合
event.target做精确元素判断（比如只对img子节点生效） - 必须兼容 IE8 及更老浏览器（
onmouseenter在 IE5.5+ 支持，但早期存在兼容性问题）
onmouseenter 只在边界穿越时触发一次
onmouseenter 仅在鼠标真正从外部跨过元素边界进入时触发，进入子元素不会再次触发——它内部已阻止了冒泡，也不响应子元素的“穿透式”进入。
关键差异点：
- 不会因子元素 hover 而重复触发父级回调
- 不支持事件冒泡，无法被
stopPropagation()影响（它本来就不冒） - 与 CSS
:hover行为更一致：只关心“是否在该元素视觉区域内”，不关心路径
示例对比：
Perplexity SEO Optimization Guide
下载
Perplexity SEO 优化指南 — 如何获得 Perplexity AI 的引用。涵盖 Perplexity 引用行为、面向 Perplexity 答案的内容结构、Perplex...
<div id="box">
外层
<span>内层</span>
</div>
<script>
document.getElementById('box').onmouseover = () => console.log('over');
document.getElementById('box').onmouseenter = () => console.log('enter');
</script>
把鼠标从空白处移入 span 文字：控制台会输出 over ×2（先 box，再 span 冒泡上来），但只输出 enter ×1（仅 box 边界穿越）。
onmouseout vs onmouseleave 同理
和进入事件对称，onmouseout 在鼠标离开任一子元素时都会触发（包括离开子元素去父元素其他区域），而 onmouseleave 只在鼠标真正移出整个元素边界时才触发。
容易踩的坑：
- 用
onmouseout隐藏下拉菜单，结果鼠标一移到菜单里的链接就消失——换成onmouseleave即可解决 - 误以为
onmouseout是“离开当前元素”的可靠信号，实际它常被子元素干扰 - 没配对使用：
onmouseenter必须搭配onmouseleave，混用onmouseover+onmouseleave会导致状态错乱
现代开发中优先选 onmouseenter/onmouseleave
除非你明确需要冒泡行为或要支持极老浏览器，否则默认用 onmouseenter/onmouseleave 更安全、更符合直觉。
注意点：
- React 中写成
onMouseEnter/onMouseLeave（驼峰命名，React 合成事件已封装兼容性） - Vue 中是
@mouseenter/@mouseleave，同样不冒泡 - 原生 addEventListener 推荐用
'mouseenter'字符串，而非onmouseenter属性名
最常被忽略的是：这两个事件没有对应的 capture 阶段变体，也无法通过 useCapture 参数改变行为——它们天生就是“非冒泡”的，这点和 click 等事件不同。
