当光标离开子元素悬停父元素时,如何防止父元素的鼠标悬停?
How to prevent the mouseover of parent element when the cursor leaves child element to hover parent element?
我里面有一个父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",这是一个问题,因为我想阻止它,我不想执行事件处理程序。
有什么想法吗?
切换到使用 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>
我里面有一个父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",这是一个问题,因为我想阻止它,我不想执行事件处理程序。
有什么想法吗?
切换到使用 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>