带有动画元素的 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 函数似乎都绑定到鼠标，而不是实际对象。使用内联替代方法时也是如此：onmouseout 等。

据我所知，对于您正在尝试做的事情，并没有真正的好选择。如果这是一个绝对必要的功能，我会这样做。

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

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