mouseenter是最直接可靠的选择，它只在鼠标真正进入绑定元素边界时触发一次，不因内部子元素切换而误判；onmouseover会冒泡且频繁触发导致状态抖动，React中应使用onMouseEnter/onMouseLeave。
mouseenter 是最直接、最可靠的选择，它只在鼠标真正进入绑定元素的边界时触发一次，不因内部子元素切换而误判。
为什么不用 onmouseover
onmouseover 会冒泡，且只要鼠标移入任意后代节点（比如从父 div 移到里面的 span），就立刻触发一次 onmouseout + 一次 onmouseover。结果是：看似没离开，但状态已翻转两次——hover 类反复增删，动画闪烁，isHovered 布尔值频繁抖动。
常见错误现象：
- 悬停菜单在子项间移动时意外关闭
- CSS
:hover正常，但 JS 监听的onmouseover却疯狂回调 - 用
event.target === event.currentTarget手动过滤，逻辑冗余还易漏判
原生 DOM 推荐写法：用 addEventListener
避免直接赋值 element.onmouseenter = handler，它只能绑定一个监听器，后续覆盖无提示。
立即学习“前端免费学习笔记（深入）”；
正确做法：
const el = document.querySelector('.card');
el.addEventListener('mouseenter', () => {
el.classList.add('active');
});
el.addEventListener('mouseleave', () => {
el.classList.remove('active');
});
注意点：
- 不要混用：既写
el.onmouseenter = fn1又调addEventListener('mouseenter', fn2)，后者行为不可预测 - 移除监听时，必须传入相同函数引用；如需动态解绑，用具名函数或
AbortController（现代推荐） -
mouseenter/mouseleave在 IE6+ 全支持，当前可忽略兼容性问题
React 中必须用 onMouseEnter/onMouseLeave
React 的合成事件系统对 onmouseover/mouseout 没做特殊处理，行为和原生一致，依然会误触发。而 onMouseEnter 和 onMouseLeave 是 React 封装的语义化事件，底层已屏蔽子元素干扰：
-
onMouseEnter：仅当鼠标首次进入该元素（含所有后代）时触发一次 -
onMouseLeave：仅当鼠标完全移出该元素边界（不再覆盖任何后代）时触发一次 - 无需手动判断
event.target === event.currentTarget，除非你明确只想响应“悬停在父元素自身空白区”
真正容易被忽略的是：即使用了 mouseenter，如果父元素内有 position: absolute 的子元素溢出边界，鼠标划过溢出区域时仍可能触发 mouseleave —— 因为浏览器按渲染盒边界判定，不是按 HTML 结构树。
