鼠标移动太快时不会触发 Mouseover 和 mouseout 事件？

Posted 2023-05-09

【中文标题】鼠标移动太快时不会触发 Mouseover 和 mouseout 事件？

【英文标题】：Mouseover and mouseout events won't trigger when mouse moves too fast?

【发布时间】：2013-08-18 14:27:48

【问题描述】：

我写了一个现场演示来展示这个问题：

http://cssdeck.com/labs/wcczap11

如果您在蓝色、红色和绿色区域之间快速移动鼠标，您会看到 x 和 z 日志之间没有出现红色的“y”日志，这意味着您无法获取红色区域的鼠标事件。

这就是我想要的：

但是当鼠标移动太快时：

我只是想知道有没有一种方法，无论我移动鼠标多快，结果总是与第一张图像相同？

【问题讨论】：

我不完全确定为什么这个问题是-5；请一位或多位投反对票的人添加评论，解释他们的决定，并就如何改进问题提供建议？

@AdrianWragg 我也不知道为什么我的问题是-5。无论如何，我将标题更改为更合适的标题。

【参考方案1】：

我不完全确定它是否会影响 javascript，但不同的鼠标具有不同的轮询率（以赫兹为单位），如果你的鼠标是 1000hz 并且你以恒定的速度移动 1000px，你应该拾取每个像素。

但实际上，我们在开始时非常快速地移动鼠标，并在接近目标时放慢速度以提高准确性。这意味着前 700ish 像素的移动速度将比 700hz 轮询的速度更快，因此您会丢失鼠标在 1hz 中移动超过 1px 的值。

这有点像一个愚蠢的版本（主要是因为我对它一无所知）但基本上小目标很容易被鼠标事件错过。

您可以尝试扩大目标区域，但仍然无法解决所有问题：)

【讨论】：

在您的示例中，您可以假设如果用户从蓝色变为绿色，那么他们“应该”在“输入”和“输入”之间的相交向量/点处输入并离开“红色”出口”点的蓝色和绿色。这需要比我在星期五早上想出的更多的数学，但逻辑是合理的。您也可以将此理论外推到其他场景。

我也针对我自己的答案提出了这一点，但这取决于 OP 是否想要“over Y”事件，或“从 X 移动到 Z”事件 - 可以采取不涉及越过 Y 的路线。他们也可能快速从 X 对角线离开，这样他们确实会离开 X，越过 Y（但太快而无法触发事件）但完全错过了 Z。

但是，

同意了；始终可以完全离开浏览器窗口，然后输入其他内容，因此不确定这会改变什么...我提供了另一种思维方式，因此 OP 可以以不同的方式处理它，因为无法增加鼠标轮询率:)

【参考方案2】：

这里的问题很简单。

事件并没有因此而“丢失”。它们从来没有真正触发过：由于传输速度，浏览器在任何时候都不会将指针拾取为“结束”。如果是这样，那么它也不能触发“out”，因为它从一开始就没有被视为“in”。

【讨论】：

那么，没有办法避免这种意外行为吗？

如果不改变代码的其他部分，就无法避免这种情况 - 例如，如果用户在 X 中，则将 Y 扩展到也覆盖 Z，并且只有在 Y :hover 被击中。

正如@simey.me 所说，我想我可以使用开始和最终状态来预测鼠标必须经过的位置。

@YadSmood 使用我的 l33t hacz0r 技能，当我在 Z 旁边时，我只是将鼠标横向移出 X，向下，然后再次移回；我没有越过 Y。您是在“鼠标悬停 Y”事件之后，还是“从 X 移动到 Z”事件之后？

@YadSmood, @Adrian - 您可以将它们组合起来。如果您没有检测到 red 的事件，则回退到我描述的“最佳猜测”方法 :)

【参考方案3】：

它不会丢失。它来来去去，但你看不到，因为你移动鼠标太快了。在您的示例中，它并没有丢失。

【讨论】：

请看我新添加的图片，问题确实发生了。我只是想知道有没有一种方法，无论我移动鼠标多快，结果总是与第一张图像相同。

【参考方案4】：

调用执行时间过长的回调会导致浏览器跳过轮询，直到下一个轮询滴答声（你见过[Violation] 'message' handler took 326ms 控制台消息吗？）。您正在使用 jQuery 来附加事件处理程序（我对 jQuery 了解不多），因此事件处理程序有可能不是被动的。