为什么我不能可靠地捕获mouseout事件？ [英] Why can't I reliably capture a mouseout event?

问题描述

我需要知道鼠标光标何时离开 div 。所以我挂了 mouseout 事件。但是，如果我将鼠标快速移出 div ，则 mouseout 事件不会触发即可。这是正确的：鼠标光标 仍然位于 div 内，它现在外 div ，但尚未调用 mouseout 回调。 （如果我不快速移动鼠标，它可以正常工作。）

I need to know when the mouse cursor leaves a div. So I hook up the mouseout event. However, if I move the mouse very quickly out of the div, the mouseout event doesn't fire. That's right: the mouse cursor was sitting still inside the div, it's now outside the div, and yet the mouseout callback hasn't been called. (It works fine if I don't move the mouse quite so fast.)

顺便说一下，在最新的Google Chrome 中也是如此 - 所以不只是旧浏览器问题。

This is true in the latest Google Chrome by the way – so not just an "old browsers" problem.

解决方法：

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

A question about this problem has been posed before. Apparently it's just a fact of life, and the only workaround I've found is to manually monitor mousemove events, each time checking the cursor's x/y co-ordinates and seeing if they fall within the div’s bounding box, so you have more chances to "notice" if the cursor is no longer inside it.

与让浏览器本身完成所有这些操作相比，对每个像素移动执行计算都会受到一点性能影响。代码也很繁琐。

Compared to letting the browser do all this natively, performing calculations on every pixel move is a bit of a performance hit. It's also tedious to code.

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

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

Why can't the browser can't reliably capture the mouseout event? If I can reliably tell when the mouse has left the div using the above workaround, why can't the browser do it?

我理解（从上面链接的答案）JavaScript不会尝试插入框架。假设您在文档上放置 mousemove 处理程序，并快速将鼠标向右移动200像素水平线，您可能不获得200 mousemove 事件。一些将被遗漏。我没有遇到任何问题。

I understand (from the answer linked above) that JavaScript doesn't try to interpolate "frames". Say if you put a mousemove handler on the document, and quickly move the mouse 200 pixels to the right in a perfect horizontal line, you might not get 200 mousemove events. A few will be missed. I don't have a problem with that.

但是如果鼠标越过 div的边界就会错过一些像素移动

，为什么还要跳过 mouseout 事件呢？当浏览器最终再次开始注册鼠标位置时（突然快速移动之后），即使鼠标现在在框外里程，关键是它曾经在框中<不再是。那么为什么它不会发射mouseout事件呢？

But if some pixel movements are missed just as the mouse crosses the boundary of the div, why does it follow that the mouseout event should also be skipped? When the browser finally starts registering the mouse's position again (after a sudden fast movement), even if the mouse is now miles outside the box, the point is that it used to be in the box and no longer is. So why doesn't it then fire the mouseout event then?

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

I just don't get why this would be a hard problem for the browser vendors to solve. (But I trust there might be a good reason, which I'm too stupid to think of.)

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

I'm posting this question mainly out of curiosity, but I'm hoping the answer might give some insight that could help me work around the problem more efficiently. Also, any alternative workarounds (which are faster than the one presented above) would be welcome.

推荐答案

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

I know that you don't want a workaround, but you don't need to check mouse's x/y to know if you are in or out an element. You could simply check the element from which the mousemove event was fired. If you put a mousemove on document, the event will fire from one of its children, and you can compare that element with your element to know if it is one of its descendants.

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

Or you could go up the parentNode tree and stop if you find your element. Then you know you are inside the element and still in it, otherwise you reach the document and you are out.

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

Some browsers implement the mouseenter/mouseleave events that, I've noticed, are more accurate than mouseout. Prototype and jQuery have a workaround for browsers that don't implement these new events. Mouseleave does not fire from an element's children, whereas mouseout does.

这篇关于为什么我不能可靠地捕获mouseout事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！