带有动画元素的 jQuery mouseleave 错误

发布于 2024-08-20 23:29:15 字数 612 浏览 11 评论 0原文

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

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

有什么想法如何修复它吗?

I have bumped into a weird issue.

jQuery 1.4.1 mouseenter/mouseleave events fire up correctly if the mouse is being moved, not a big deal. However, it bugs in some browsers when the cursor itself remains static but the element is being moved away by animate().

So imagine the code like this:

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

if you rapidly move the mouse onto the element and then stop it, you'll get different results depending on the browser.

FF3.6, Safari 4, IE7: mouseleave fired as expected when cursor has left the animated element, even if the mouse itself stands still.

IE6, IE8, Opera 9/10, Safari 3, Chrome: mouseleave NOT fired even when the element is outside the window. It takes a slight mouse move to trigger correct mouseleave event.

Any ideas how to fix it?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

意中人 2024-08-27 23:29:15

不幸的是,看来 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,这也应该是运行的函数。

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

Unfortunately, it appears that the mouseover, mouseleave, mouseover, and mouseout functions are all bound to the mouse, not to the actual object. This is just as true when using the inline alternative: onmouseout, etc.

As far as I know, there isn't really a great alternative for what you are trying to do. If it's an absolutely necessary function, here's how I would go about it.

  1. Create a mouseenter handler for your element. When the mouse enters the element, bind both mouseout and mousemove.
  2. When the mousemove event is called, use that event object to store the mouse's x and y positions in global variables.
  3. Use a custom animation function that moves the element with a while loop. Inside of that while loop, check to see if the element has moved out of the the x and y coordinates stored in step 2.
  4. If that element has moved off those x and y coords, do whatever you need to do, and also unbind mousemove (otherwise it will eat up unnecessary resources). This should also be the function that runs if the mouseout from step 1 is called.

Hope that makes sense. If I find some more time today I'll build an example fiddle so you can see how it works.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文