How to catch mouseover event when dynamically added where mouse is already over the element?

Question

I dynamically add this

$(ele).on("mouseover")

when user has mouse over the element, but it seems that mouseover event triggers only when I reenter element.

Here is example in jsFiddle (Click on <div> to add event listener)

How can I achieve this without manually triggering .mouseover() ?

score 3 · Accepted Answer · edited May 23 '17 at 12:07

3

Best solution I came up with was (Thanks to Brandon's suggestion):

Store x,y pos in document (drops performance on webpage a bit):

$(document).mousemove(function (e) {
    // Set global values
    window.mouseXPos = e.pageX;
    window.mouseYPos = e.pageY;
});

And then when animation is finished:

$(document.elementFromPoint(window.mouseXPos, window.mouseYPos)).trigger("mouseenter");

edited May 23 '17 at 12:07

Community

1
1

answered Apr 08 '13 at 14:42

skmasq

4,470
6
42
77

score 0 · Answer 2 · answered Apr 07 '13 at 03:38

0

You can't. mouseover only triggers when the mouse crosses the boundary of the element. Once the mouse is within the element, it won't trigger. Your question suggests you might need to take a step back and re-examine your problem. If you are taking action when the mouse is already within the element then why do you need a mouseover event?

answered Apr 07 '13 at 03:38

Brandon

38,310
8
82
87

I stumbled uppon problem, where I fade in elements, and add all event handler only after the initial animation is over, but user knows that he can click only when that element animates, but problem is user has his mouse already over and sees that nothing is animating until he reenters the element. Problem is I can't manually trigger even because I have no clue on which element mouse is actually on. On solution I just thought of, I could make element position map and with extra function locate mouse position and trigger event on that position, problem with that - it's to riscky. – skmasq Apr 07 '13 at 03:51
Ah, if that's all you need, use document.elementFromPoint: http://stackoverflow.com/questions/1259585/get-element-at-specified-position-javascript – Brandon Apr 07 '13 at 13:31

score 0 · Answer 3 · answered Apr 07 '13 at 03:42

0

You can manually trigger a mouseover with the trigger jQuery function after attaching you eventhandler this way

$(".test").on("click",function(){
    $(this).on("mouseover",function(){
       alert("");   
    });
    $(this).trigger('mouseover');
})

answered Apr 07 '13 at 03:42

EmeraldCoder

527
3
12

How to catch mouseover event when dynamically added where mouse is already over the element?

3 Answers3