方法一、 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】
mouseover 與 mouseenter:

mouseover => 不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。
mouseenter => 只有在鼠標指針從元素外穿入被選元素（到元素內）時，才會觸發 mouseenter 事件。

mouseout 與 mouseleave:

mouseout => 不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
mouseleave => 只有在鼠標指針從元素內穿出被選元素（到元素外）時，才會觸發 mouseleave 事件。

方法二、利用e.stopPropagation()阻止事件進一步傳播
e.stopPropagation()會終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法后，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點。

方法一親測有用，方法二：react中么有用
轉載

補充

react中使用 onMouseLeave()；
MouseLeave(),鼠標移出div也不會消失

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的React 解决鼠标移入子元素触发父元素的mouseout事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。