在 React 中，使用 onMouseEnter/onMouseLeave 替代 onMouseOver/onMouseOut，并结合 event.currentTarget === event.target 判断，可精准控制事件仅在鼠标真正进入或离开父容器可视边界时触发，避免子元素冒泡干扰。
在 react 中，使用 `onmouseenter`/`onmouseleave` 替代 `onmouseover`/`onmouseout`，并结合 `event.currenttarget === event.target` 判断，可精准控制事件仅在鼠标真正进入或离开父容器可视边界时触发，避免子元素冒泡干扰。
在构建商品卡片（如电商场景中的 GoodCardMod）时，常需为整个卡片容器添加悬停交互逻辑（例如显示操作按钮、高亮边框或触发动画）。但若直接使用 onMouseOver 和 onMouseOut，由于事件冒泡机制，当鼠标在父
内部移入/移出任意子元素（如图片、标题、按钮等）时，都会反复触发回调——导致“假性进出”，体验异常且性能浪费。
根本原因在于事件模型差异：
- onMouseOver / onMouseOut 属于冒泡型事件，会响应所有层级的进入/离开（包括子元素间的切换）；
- onMouseEnter / onMouseLeave 是合成事件，专为“真正跨越容器边界”设计，天然忽略子元素内部移动，语义更准确、行为更稳定。
✅ 推荐方案：使用 onMouseEnter + onMouseLeave（无需额外判断）
这是最简洁、语义最清晰、React 官方推荐的方式：
function GoodCardMod(props) {
const handleMouseEnter = () => {
console.log('✅ Mouse truly entered the card container');
// 例如：setIsHovered(true);
};
const handleMouseLeave = () => {
console.log('✅ Mouse truly left the card container');
// 例如：setIsHovered(false);
};
return (
<div
className="good-card-container component-container"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<img src={good.good_image} alt={good.name} className="good-card-image" />
<span className="good-card-title">{good.name}</span>
<span className="good-card-price">{good.current_price} грн</span>
<Button
size="small"
onClick={isInCart[0] ? () => {} : () => cartDispatcher(addToCartAction(cartGood))}
variant="contained"
className="good-card-button"
color={isInCart[0] ? 'success' : 'primary'}
>
{isInCart[0] ? 'Вже у кошику' : 'У кошик'}
</Button>
<CharachteristicsList characteristics={good.good_characteristics} />
</div>
);
}⚠️ 注意事项与进阶说明：
- onMouseEnter/onMouseLeave 不冒泡，因此无需 stopPropagation，也无需 currentTarget === target 判断——该判断仅在必须使用 onMouseOver 的遗留场景中作为兜底方案（如兼容极老环境），但会增加冗余逻辑且易出错；
- 若需在 onMouseOver 场景下临时规避子元素干扰（不推荐），可按答案所示加判断：
const handleMouseOver = (e) => { if (e.currentTarget === e.target) { console.log('Entered parent boundary (not a child)'); } };但此方式仍可能因 CSS pointer-events: none 或透明覆盖层导致误判，可靠性远低于原生 enter/leave；
- 确保父容器具有明确尺寸与 display 行为（如非 display: contents），否则视觉边界与事件边界可能不一致；
- 在服务端渲染（SSR）或 hydrate 场景中，onMouseEnter/onMouseLeave 兼容性良好，无已知缺陷。
总结：
抛弃 onMouseOver/onMouseOut，坚定选用 onMouseEnter/onMouseLeave——它们是 React 中实现“容器级悬停”的标准、高效、可维护的解决方案。一次正确选型，即可彻底规避子元素干扰问题，让交互逻辑回归语义本质。
