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

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>