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等。

据我所知，对于你想要做的事情，并没有一个很好的选择。如果它是一个绝对必要的功能，那么我就是这样做的。

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

希望这是有道理的。如果我今天找到更多的时间，我会建立一个示例小提琴，这样你就可以看到它是如何工作的。

jQuery mouseleave错误与动画元素

1 个答案: