在 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 中实现“容器级悬停”的标准、高效、可维护的解决方案。一次正确选型，即可彻底规避子元素干扰问题，让交互逻辑回归语义本质。