很难解释，一个奇怪的 javascript 鼠标悬停问题
我有一个盒子（黑色边框）。我有一个处理程序来跟踪该框的鼠标移出事件。问题是当鼠标悬停在该框内的某个项目（例如 div）（红色边框框和蓝色边框框）上时。触发黑框框事件的 mouseout 或 mouseleave。
我在谷歌上搜索了三天，但没有找到解决这个问题的方法。为什么当鼠标位于框的边界内时，会在框内触发 mouseleave/out 事件。 div 的位置是“绝对”的。我尝试使用核心 JavaScript 和 JQuery。
I have a box (the black bordered). I have a handler to trance the mouseout event of this box. The issue is when the mouse is hovered over an item let say div within this box ( the red bordered box, and the blue bordered box). The mouseout or mouseleave of the black bordered box event is fired.
I am googling for three days, but did not find any solution for this issue. Why the mouseleave/out event is fired within the box as mouse is within its boundary. The position of the div is "absolute". I tried with core JavaScript and JQuery.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
jQuery 的
.live已弃用，请使用.on另外，使用
mouseout表示当鼠标离开所选元素时 OR 任何该元素的子元素，都会触发该事件。mouseleave仅适用于所选元素。jQuery's
.liveis deprecated, use.onAlso, using
mouseoutmeans that when the mouse leaves the selected element OR any of that elements children, the event is triggered.mouseleaveapplies only to the selected element.http://www.quirksmode.org/js/events_mouse.html 有一个很好的文档#鼠标悬停。它可以帮助您理解为什么当鼠标在框中移动时会触发该事件；并提出了区分外部和内部动作的解决方案。
There is a good documentation at http://www.quirksmode.org/js/events_mouse.html#mouseover. It may help you to understand why the event is fired when moving the mouse inside you box; and it proposes a solution for distinguishing between external and internal moves.
我也遇到了类似的问题，但是浏览器表现很正常。
mouseenter和mouseleave事件并未像您期望的那样在所有覆盖的 dom 元素上传播。对于您需要这样做的情况，我开发了一个名为 superBindjQuery 库>。
正如您在示例中看到的，唯一的区别是您通过方法
superBind绑定事件，而不是通常的方法（bind、live，上..等等）。希望这有帮助！
I had a similar problem, but the browser is behaving quite normal. The
mouseenterandmouseleaveevents aren't propagating on all the overlaying dom elements as you would expect.For cases when you need it to do so, I've developed a small jQuery library called superBind.
As you can see in the example, the only difference is that you bind your events through the method
superBindinstead of the usual ones (bind,live,on.. and so on).Hope this helps!
确保按钮顶部没有其他选择器。例如，如果您有一个带有填充的 div 和一个标签，那么当您的鼠标从 div 移动到标签时，即使您位于 .解决方案是什么？直接将边框、鼠标移出和内边距添加到标记中。
Make sure there's not another selector on top of your button. For instance, if you have a div with padding and an tag inside, the mouseleave event WILL fire when your mouse moves from the div to the tag even though you're inside the . The solution? Add the border, mouseout, and padding directly to the tag.