Geek asks and answers

The mouseenter / mouseleave event does not fire when the target is animated and passes under the mouse pointer

I have this example to illustrate the situation: http://jsfiddle.net/nubrF/40/

If you hold the mouse on the way to the animated element, you may notice that events are triggered only in Firefox (not in IE, Chrome or Safari) when the target element passes "under" the mouse pointer.

I actually have two questions:

  • Is this normal browser behavior?

  • Which method do you recommend somehow simulating these events and receiving notification when the target element passes under the mouse pointer?

I should mention that I already thought about the pageX and pageY of the mouse and the position of the element on the page, but this solution seems complicated and not very clean.

Thank you for your help.

+3
source share
1 answer

Yes, this is normal behavior. The path to it may be to discard the mouse element / mouse and bind the mousemove event to the document. From there, find the location of the mouse pointer on the page and offset (), with () and height () of the animated element. If the last point saved from the mousemove event falls inside this area, your mouse is in the element.

You will need to test it every time you update the animation, which you can do using the animated step function .

eg.

function myAnimateStepFunc(e,fx) {
    var $e = $(fx.elem);
    var p = $e.offset();
    var isin = false;
    if(lastx >= p.left && lasty >= p.top) {        
        isin =(lastx < p.left + $e.width() && lasty < p.top + $e.height());           
    }

...

This may be enough, although you can extend it to then trigger mouseleave / mouseenter events aimed at the animation element.

, mousemove , , , div .

+4

More articles:


All Articles