带有动画元素的 jQuery mouseleave 错误

Question

我遇到了一个奇怪的问题。

如果鼠标移动，jQuery 1.4.1 mouseenter/mouseleave 事件会正确触发，这没什么大不了的。然而，当光标本身保持静态但元素被 animate() 移走时，它在某些浏览器中会出现错误。

想象一下这样的代码:

jQuery('somelement').bind(
{
   mouseenter: function(e) {
     log.debug("enter");
     $(this).animate({left: 9999}, 2000);
   },
   mouseleave: function() {
     log.debug("leave");
   }
});

如果将鼠标快速移动到元素上然后停止，根据浏览器的不同，您会得到不同的结果。

FF3.6、Safari 4、IE7:当光标离开动画元素时，mouseleave 按预期触发，即使鼠标本身静止不动。

IE6、IE8、Opera 9/10、Safari 3、Chrome:即使元素位于窗口之外，mouseleave 也不会触发。需要轻微移动鼠标才能触发正确的 mouseleave 事件。

有什么解决办法吗？

Answer 1

不幸的是，mouseover、mouseleave、mouseover 和 mouseout 函数似乎都绑定(bind)到鼠标，而不是实际对象。使用内联替代方案时也是如此:onmouseout 等。

据我所知，对于您正在尝试做的事情来说，确实没有一个很好的选择。如果这是一个绝对必要的功能，那么我将如何实现它。

1. 为您的元素创建一个 mouseenter 处理程序。当鼠标进入元素时，同时绑定(bind)mouseout和mousemove。
2. 当调用 mousemove 事件时，使用该事件对象将鼠标的 x 和 y 位置存储在全局变量中。
3. 使用自定义动画函数，通过 while 循环移动元素。在 while 循环内部，检查元素是否已移出步骤 2 中存储的 x 和 y 坐标。
4. 如果该元素已移出 x 和 y 坐标，请执行您需要执行的操作，并取消绑定(bind) mousemove(否则它将占用不必要的资源)。如果调用第 1 步中的 mouseout，这也应该是运行的函数。

希望这是有道理的。如果我今天有更多时间，我将构建一个示例 fiddle ，以便您可以了解它是如何工作的。