当光标离开子元素悬停父元素时，如何防止父元素的鼠标悬停？

Question

我里面有一个父div和一个子div，如下：

<div id="parent" onmouseover="console.log('foo');" style="width:100px;height:100px;background-color:blue;">
 
 <div id="child" style="width:50px;height:50px;background-color:red;">
 </div>

</div>

如您所见，在父 div 中，我只是添加 onmouseover="console.log('foo');"。

因此，当我从外部悬停 div 父级或悬停子级 div 时，控制台显示 "foo"，没问题。

但是当我从子div悬停父div时，也就是说，当光标离开子div悬停父div时，控制台显示"foo"，这是一个问题，因为我想阻止它，我不想执行事件处理程序。

有什么想法吗？

Answer 1

切换到使用 mouseenter 事件。

<div id="parent" onmouseenter="console.log('foo');" style="width:100px;height:100px;background-color:blue;">
 
 <div id="child" style="width:50px;height:50px;background-color:red;">
 </div>

</div>

当光标离开子元素悬停父元素时，如何防止父元素的鼠标悬停？

How to prevent the mouseover of parent element when the cursor leaves child element to hover parent element?

javascript

html

parent-child

dom-events

onmouseover