带有动画元素的 jQuery mouseleave 错误

Posted 2023-05-08

【中文标题】带有动画元素的 jQuery mouseleave 错误

【英文标题】：jQuery mouseleave bugs with animated elements

【发布时间】：2011-01-15 22:27:42

【问题描述】：

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

如果鼠标被移动，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 事件。

有什么解决办法吗？

【问题讨论】：

刚刚也遇到了这个问题。 :)

这是一个演示问题的小提琴。 jsfiddle.net/xb2pR

【参考方案1】：

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

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

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

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