Trigger onmouseover event programmatically in JavaScript

Question

Is there a way to programmatically trigger the onmouseover event in plain JavaScript? or "extract" the method from the onmouseover event to call it directly?

eg

<div id="bottom-div" onmouseover="myFunction('some param specific to bottom-div');">
    <div id="top-div" onmouseover="????????"></div>
</div>

top-div is above bottom-div, so the onmouseover won't get fired in bottom-div. i need a way of calling myFunction('some param specific to bottom-div'); from top-div

Have you tried this? The onmouseover event should fire on the parent event also thanks to event propagation. — Tatu Ulmanen
– Tatu Ulmanen, Commented Feb 9, 2010 at 10:43
ok i didn't think about that, sorry it's a slightly bad example because in my app they aren't actually nested elements. the top div is absolutely positioned over a number of other elements. — fearofawhackplanet
– fearofawhackplanet, Commented Feb 9, 2010 at 11:09
@Piskvor: I was trying to reduce a very complex piece of html to a simple example and I made a mistake. Sorry if that offends you. — fearofawhackplanet
– fearofawhackplanet, Commented Jul 7, 2010 at 8:07
@fearofawhackplanet: I apologize for my arrogant comment, deleted. (factual part: "element overlapping != element nesting") — Piskvor left the building
– Piskvor left the building, Commented Jul 7, 2010 at 8:19
1-liner version (tested in Chrome console) element.dispatchEvent(e=(document.createEvent( 'Events' )),e.initEvent( "mouseenter", true, false ),e) — Jan
– Jan, Commented Jul 22, 2019 at 12:02

givehug · Accepted Answer · 2018-03-12 23:32:37Z

99

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

answered Mar 12, 2018 at 23:32

givehug

2,0711 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ESR Over a year ago

Scrolled down hoping I would find something like this

brianf Over a year ago

Sometimes mouseover doesn't work but mouseenter does. const evt = new Event('mouseenter'); whateverElement.dispatchEvent(evt);

givehug Over a year ago

nice, these are different events

zvijude Over a year ago

not working on mobile

givehug Over a year ago

@YehudaZvi get a new device, this is 2024 already!

Kishan · Accepted Answer · 2019-08-15 04:03:12Z

41

For me following worked:

document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));

Also:

document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));

answered Aug 15, 2019 at 4:03

Kishan

1,82014 silver badges19 bronze badges

Comments

Jonathan · Accepted Answer · 2012-12-01 00:17:49Z

39

This worked for me in IE9 at least. Should be cross-browser compatible or close to it...

function FireEvent( ElementId, EventName )
{
    if( document.getElementById(ElementId) != null )    
    {   
        if( document.getElementById( ElementId ).fireEvent ) 
        {
            document.getElementById( ElementId ).fireEvent( 'on' + EventName );     
        }
        else 
        {   
            var evObj = document.createEvent( 'Events' );
            evObj.initEvent( EventName, true, false );
            document.getElementById( ElementId ).dispatchEvent( evObj );
        }
    }
}

For onmouseover example, call the function like this

FireEvent( ElementId, "mouseover" );

answered Dec 1, 2012 at 0:17

Jonathan

5316 silver badges3 bronze badges

3 Comments

james Over a year ago

For what it's worth, initEvent is deprecated and should not be relied upon according to MDN developer.mozilla.org/en-US/docs/Web/API/Event/initEvent .. and example that could be in the else block above is:

var event = new MouseEvent(EventName, { 'view': window, 'bubbles': true, 'cancelable': true }); document.getElementById(ElementId).dispatchEvent(event);

Csa77 Over a year ago

this was the only solution which worked for me on Chrome in 2021 :)

Mahmoud Aly Over a year ago

var evObj = document.createEvent( 'Events' );evObj.initEvent( EventName, true, false ); document.getElementById( ElementId ).dispatchEvent( evObj ); This works like a charm :)

Jonathan · Accepted Answer · 2012-12-02 01:07:47Z

Without going into too much detail, I had an img with rollovers, i.e. mouseout/overs that set the img src to hidden form values (or this could have done in a different context with gloabl variables). I used some javascript to swap both of my over/out image values and I called the called FireEvent( ElementId, "mouseover" ); to trigger the change. My javascript was hiding / displaying elements on the page. This caused the cursor to sometimes be over the img I used to trigger the event - which was the same as the one I was swapping out, and sometimes the cursor was not over the img after the click.

Mouseover/out does not fire unless you exit and re-enter an element, so after my event was triggered the mouseover/out needed "retriggering" to account for the new cursor position. Here is my solution. After I hide / display various page elements, and to do my img src swapping as described, I call the function RefreshMouseEvents( ElementId ) instead of FireEvent( ElementId, "mouseover" ).

This works in IE9 (not sure about other browsers).

function RefreshMouseEvents( ElementId )
{
    FireEvent( ElementId, 'mouseover' );
    setTimeout( "TriggerMouseEvent( '" + ElementId + "' )" , 1 );
}

function TriggerMouseEvent( ElementId )
{
    if( IsMouseOver( ElementId, event.clientX, event.clientY ) )
        FireEvent( ElementId, 'mouseover' );
    else    
        FireEvent( ElementId, 'mouseout' );
}

function IsMouseOver( ElementId, MouseXPos, MouseYPos )
{
    if( document.getElementById(ElementId) != null )    
    {
        var Element = document.getElementById(ElementId);   
        var Left  = Element.getBoundingClientRect().left, 
            Top   = Element.getBoundingClientRect().top,
            Right = Element.getBoundingClientRect().right,
            Bottom  = Element.getBoundingClientRect().bottom;       
        return ( (MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))    
    }
    else
        return false;
}

function FireEvent( ElementId, EventName )
{
    if( document.getElementById(ElementId) != null )    
    {   
        if( document.getElementById( ElementId ).fireEvent ) 
        {
            document.getElementById( ElementId ).fireEvent( 'on' + EventName );     
        }
        else 
        {   
            var evObj = document.createEvent( 'Events' );
            evObj.initEvent( EventName, true, false );
            document.getElementById( ElementId ).dispatchEvent( evObj );
        }
    }
}

Don't use a setTimeout as eval! Instead, use Function.prototype.bind.

Jonathan · Accepted Answer · 2012-12-06 16:48:32Z

I had to revise my RefreshMouseEvents set of functions after more testing. Here is the seemingly perfected version (again only IE9 tested):

function RefreshMouseEvents( ElementId ) 
{
    FireEvent( ElementId, 'mouseover' );
    setTimeout( "TriggerMouseEvent( '" + ElementId + "', '" + event.clientX + "', '" + event.clientY + "' )", 1 );
}

function TriggerMouseEvent( ElementId, MouseXPos, MouseYPos )
{
    if( IsMouseOver( ElementId, (1*MouseXPos), (1*MouseYPos) ) )
        FireEvent( ElementId, 'mouseover' );
    else    
        FireEvent( ElementId, 'mouseout' );
}

function IsMouseOver( ElementId, MouseXPos, MouseYPos )
{
    if( document.getElementById(ElementId) != null )    
    {
        var Element = document.getElementById(ElementId);   
        var Left  = Element.getBoundingClientRect().left, 
            Top   = Element.getBoundingClientRect().top,
            Right = Element.getBoundingClientRect().right,
            Bottom  = Element.getBoundingClientRect().bottom;       
        return ( (MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))    
    }
    else
        return false;
}

function FireEvent( ElementId, EventName )
{
    if( document.getElementById(ElementId) != null )    
    {   
        if( document.getElementById( ElementId ).fireEvent ) 
        {
            document.getElementById( ElementId ).fireEvent( 'on' + EventName );     
        }
        else 
        {   
            var evObj = document.createEvent( 'Events' );
            evObj.initEvent( EventName, true, false );
            document.getElementById( ElementId ).dispatchEvent( evObj );
        }
    }
}

thephatp · Accepted Answer · 2012-08-24 02:52:56Z

3

I needed to do something similar, but I'm using jQuery, and I found this to be a better solution:

Use jQuery's trigger function.

$j('#top-div' ).trigger( 'mouseenter' );

You can also add parameters to it if you need to. See the jQuery documentation on .trigger.

answered Aug 24, 2012 at 2:52

thephatp

1,4891 gold badge20 silver badges37 bronze badges

2 Comments

thephatp Over a year ago

I find it hilarious when people down-vote an answer and don't say way. So, to whoever down-voted my answer, please explain why so that I can learn something new. I don't suggest my answer is the best, but it worked for me. If you found a problem with it, please add a comment so that we can know why, or better yet, so I can improve my answer.

bigsee Over a year ago

Perhaps because the OP says they are looking for a solution "in plain Javascript"?

Reigel Gallarde · Accepted Answer · 2010-07-07 05:59:48Z

0

<a href="index.html" onmouseover="javascript:alert(0);" id="help">help</a>

document.getElementById('help').onmouseover();

answered Jul 7, 2010 at 5:59

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

aaron aaron aaron · Accepted Answer · 2023-02-09 18:44:57Z

0

I was working with Angular and trying to do a similar thing. I fall on this answer from StackOverflow Click here Basically the idea is to add and remove the hover class

public addHoverOnClick() {
    const yourElement = document.getElementById('elementID') as HTMLElement;
    yourElement .classList.add('hover')

}

public removeHoverOnClick() {
    const yourElement = document.getElementById('elementID') as HTMLElement;
    yourElement .classList.remove('hover')
}

answered Feb 9, 2023 at 18:44

aaron aaron aaron

3192 silver badges5 bronze badges

Comments

Yacoby · Accepted Answer · 2010-02-09 12:40:48Z

-31

You would do it something like this:

document.getElementById('top-div').onmouseover();

However, as mentioned in the comments, it would be worth testing before being considered an issue.

edited Feb 9, 2010 at 12:40

answered Feb 9, 2010 at 10:44

Yacoby

55.6k16 gold badges119 silver badges121 bronze badges

5 Comments

fearofawhackplanet Over a year ago

i didn't realise it was so simple! i'm sure i've tried to do similar with onclick before and it doesn't work. maybe my memory is bad.

Ja͢ck Over a year ago

I'm not sure whether this ever worked, but I believe it should at least be without the 'on' prefix.

Green Over a year ago

Doesn't work Uncaught TypeError: e.previousElementSibling.onmouseover is not a function(…)

Sebastian Simon Over a year ago

@fearofawhackplanet Please consider accepting a different answer. This one won’t work in most cases and is discouraged — it will only work when a function is bound to the onmouseover property, but addEventListener is preferred to that. This answer doesn’t work for this standard API, the most upvoted one, however, will work for any approach.

Christian Over a year ago

What this does is that it calls the function that was previously assigned to "onmouseover" (if it was assigned, otherwise you get the Uncaught TypeError). This is why .mouseover() will not work (unless you did assign a function to it). But in the end, you are not triggering a hover - you are just calling the handler.

Collectives™ on Stack Overflow

Trigger onmouseover event programmatically in JavaScript

9 Answers 9

5 Comments

Comments

3 Comments

1 Comment

Comments

2 Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Comments

3 Comments

1 Comment

Comments

2 Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related