为什么当鼠标仅移动到内部元素时会触发 onMouseOver 事件?
当鼠标悬停到内部元素时,首先触发外部元素的 mouseOut
事件,然后触发内部元素的 mouseOver
事件,最后触发 mouseOver内部元素的
元素最后被触发。
为什么会出现这种情况?因为从技术上讲,内部元素仍然位于外部元素的内部,因此当鼠标移入内部元素时,鼠标不会离开外部元素。有办法防止这种情况吗?
完整示例如下: http://jsfiddle.net/pMCeu/4/
When the mouse hovers into the inner element, the mouseOut
event for the outer element is fired first, then the mouseOver
element for inner element is fired, then the mouseOver
element for the inner element is fired last.
Why does this happen? Because the inner element technically is still inside of the outer element, so the mouse doesn't leave the outer element when it moves into the inner element. Is there a way to prevent that?
Full example here: http://jsfiddle.net/pMCeu/4/
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
为了避免这种情况,您应该使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout。
这是由于事件冒泡。请查看这篇文章了解更多信息。
To avoid this you should use mouseenter and mouseleave instead of mouseover and mouseout.
It is due to event bubbling. take a look at this post for a little more info.
您好,上面的解决方案是正确且完整的。
但你也可以使用 mousemove 事件
Hi the solution above is correct and complete.
but you can also use mousemove event