开发者

jQuery mouseleave bugs with animated elements

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).a开发者_JAVA技巧nimate({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?


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜