如何在 React 中精准监听父元素的鼠标进入与离开事件

）绑定 onMouseOver 和 onMouseOut 事件时，由于事件冒泡和子元素频繁触发，鼠标在父元素内部从一个子元素移入另一个子元素（例如从图片移到按钮），也会反复触发“离开→进入”，导致状态误判、动画闪烁或副作用重复执行。

根本原因在于：

• onMouseOver / onMouseOut 是冒泡事件，且会响应任何后代节点的悬停变化；
• 它们不区分“进入容器整体”和“进入某个子节点”，只要鼠标移入/移出任意子元素，都会触发回调。

✅ 正确解法是改用语义更精确的 onMouseEnter 和 onMouseLeave —— 这两个事件不冒泡，且天然保证：
? onMouseEnter 仅在鼠标首次进入绑定元素（含其所有后代）时触发一次；
? onMouseLeave 仅在鼠标完全移出该元素边界（不再覆盖任何后代）时触发一次。

但注意：即使使用 onMouseEnter/onMouseLeave，若需严格限定仅当鼠标直接作用于父元素自身（而非任意子元素）时才响应（例如实现“仅当悬停在空白区域时显示浮层”），则还需进一步判断事件目标：

function GoodCardMod(props) {   const handleMouseEnter = (event) => {     // ✅ 确保事件源自父元素自身（而非子元素）     if (event.currentTarget === event.target) {       console.log('鼠标真正进入了父容器自身');       // 例如：激活阴影、展开悬浮操作栏等     }   };    const handleMouseLeave = (event) => {     if (event.currentTarget === event.target) {       console.log('鼠标真正离开了父容器自身');       // 例如：收起临时UI、重置状态     }   };    return (     <div       className="good-card-container component-container"       onMouseEnter={handleMouseEnter}       onMouseLeave={handleMouseLeave}     >       @@##@@       <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>   ); }

? 关键要点说明：

• event.currentTarget 始终指向当前绑定事件处理函数的 dom 元素（即父
  ）；

• event.target 指向实际触发事件的最深子元素（可能是 、 或 ）；
• 因此 currentTarget === target 成立时，表明鼠标是直接进入/离开父元素的非子元素区域（如 padding 区域或背景空白处），而非从一个子元素移动到另一个子元素。

⚠️ 注意事项：

• 不要混用 onMouseOver/onMouseOut 与 currentTarget === target 判断——它们的触发频率过高，逻辑不可靠；
• 若业务需求是“只要鼠标在父容器范围内就保持激活态”，则直接使用 onMouseEnter/onMouseLeave 即可，无需额外判断；
• onMouseEnter/onMouseLeave 在 React 中已完全支持（无需 polyfill），兼容所有现代浏览器及服务端渲染（SSR）场景。

总结：精准控制悬停行为的核心在于选择正确的事件类型 + 明确事件目标语义。优先采用 onMouseEnter/onMouseLeave，再按需结合 currentTarget === target 进行细粒度过滤，即可优雅解决父子元素悬停干扰问题，提升电商卡片等组件的交互健壮性与用户体验。