为什么我不能可靠地捕获mouseout事件？

Question

我需要知道鼠标光标何时离开div.所以我联系了这个mouseout活动.但是,如果我将鼠标快速移出div,则mouseout事件不会触发.这是正确的:鼠标光标是坐以待毙里面div,它现在是外面的div,然而在mouseout回调没有被调用.(如果我不快速移动鼠标,它可以正常工作.)

在最新的谷歌浏览器中也是如此- 所以不仅仅是"旧浏览器"问题.

解决方法:

之前提出过关于这个问题的问题.显然这只是生活中的事实,我发现的唯一解决方法是手动监控mousemove事件,每次检查光标的x/y坐标并查看它们是否属于div边界框,这样你就有更多的机会如果光标不在其中,则"注意".

与让浏览器本地完成所有这些操作相比,对每个像素移动执行计算有点受到性能影响.编码也很繁琐.

关于我的问题......

为什么浏览器无法可靠地捕获mouseout事件？如果我可以可靠地判断鼠标何时离开div使用上述解决方法,为什么浏览器不能这样做呢？

我理解(从上面链接的答案)JavaScript不会尝试插入"框架".假如你在mousemove处理器上放置一个处理程序document,并在完美的水平线上快速将鼠标向右移动200个像素,则可能无法获得200个mousemove事件.一些将被遗漏.我没有问题.

但是如果在鼠标越过边界时错过了一些像素移动div,为什么mouseout还要跳过该事件呢？当浏览器最终再次开始注册鼠标的位置时(在突然快速移动之后),即使鼠标现在在盒子外面数英里,关键是它曾经在盒子中而不再是.那么为什么它不会发射mouseout事件呢？

我只是不明白为什么这对浏览器供应商来说是个难题.(但我相信可能有一个很好的理由,我觉得这太愚蠢了.)

我发布这个问题主要是出于好奇,但我希望答案可以提供一些有助于我更有效地解决问题的见解.此外,任何替代解决方案(比上面提到的更快)都是受欢迎的.

Answer 1

我知道你不需要一个解决方法,但你不需要检查鼠标的x/y来知道你是否在元素中.您只需检查触发mousemove事件的元素即可.如果你将鼠标移动到文档上,该事件将从其中一个子项触发,并且您可以将该元素与您的元素进行比较,以了解它是否是其后代之一.

或者你可以上去parentNode树并在你找到你的元素时停止.然后你知道你在元素里面并且仍在其中,否则你到达文档然后你就出局了.

有些浏览器实现了mouseenter/mouseleave事件,我注意到这些事件比mouseout更准确.Prototype和jQuery为没有实现这些新事件的浏览器提供了一种解决方法.Mouseleave不会从元素的子元素中触发,而mouseout则会触发.

Answer 2

您描述了非常快速地移动鼠标。当您停止时，指针是否仍在页面内？也就是说，您的鼠标指针是否仍然悬停在可见网页的某些部分上？

如果它已经出去了，那么浏览器应该做什么就不一定了。该mouseout事件应该有一个relatedTarget属性，以鼠标指针进入的内容为目标。如果鼠标指针已经在页面区域之外，则不会有相关的目标指向。

换句话说，当鼠标离开页面区域时，浏览器停止跟踪它并停止报告它的位置。如果您移动鼠标的速度足够快，从浏览器的角度来看，鼠标就会消失。直到您将鼠标移回可查看页面的边界框，浏览器才知道它在哪里，然后触发所有适当的基于移动的操作（如鼠标移出）。