3

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

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

任何想法如何解决它？

4

1 回答 1

0

不幸的是，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 时运行的函数。

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

于 2011-04-12T17:50:20.497 回答