Attiva l'evento onmouseover a livello di codice in JavaScript

Question

Esiste un modo per attivare a livello di codice il file onmouseover evento in semplice JavaScript?o "estrarre" il metodo dal file onmouseover evento per chiamarlo direttamente?

per esempio

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

top-div è sopra bottom-div, quindi il onmouseover non verrà licenziato nel div inferiore.ho bisogno di un modo per chiamare myFunction('some param specific to bottom-div'); dal div

Answer 1

Si potrebbe fare qualcosa di simile a questo:

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

Tuttavia, come accennato nei commenti, varrebbe la pena di testare prima di essere considerato un problema.

Answer 2

Questo ha funzionato per me almeno in IE9.Dovrebbe essere compatibile con più browser o vicino ad esso...

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 );
        }
    }
}

Per l'esempio onmouseover, chiama la funzione in questo modo

FireEvent( ElementId, "mouseover" );

Answer 3

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

Answer 4

Senza entrare troppo nei dettagli, ho avuto un img con rollover, cioè mouseout / fuori campo che fissano lo src img ai valori forma nascosta (o questo avrebbe potuto fare in un contesto diverso con le variabili Gloabl). Ho usato un po 'di javascript per scambiare entrambi i miei valori di immagine / out oltre e ho chiamato il chiamato FireEvent (ElementId, "mouseover"); per innescare il cambiamento. Il mio javascript si nascondeva / visualizzazione elementi della pagina. Questo ha causato il cursore di essere a volte oltre l'img ho usato per attivare l'evento - che era lo stesso di quello che stavo sostituendo, e, talvolta, il cursore non era finita l'IMG dopo il click.

al passaggio del mouse / out non si attiva a meno che non si chiude e si re-immette un elemento, quindi dopo la mia evento è stato attivato il passaggio del mouse / out necessario "retriggering" per tenere conto della nuova posizione del cursore. Ecco la mia soluzione. Dopo che ho nascondere / visualizzare i vari elementi della pagina, e di fare del mio img src scambio come descritto, che io chiamo i RefreshMouseEvents funzione (elementID) invece di FireEvent (ElementId, "mouseover").

Questo funziona in IE9 (non sono sicuro di altri browser).

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 );
        }
    }
}

Answer 5

ho dovuto rivedere le mie RefreshMouseEvents insieme di funzioni dopo ulteriori test. Ecco la versione apparentemente perfezionato (nuovo solo IE9 testato):

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 );
        }
    }
}

Answer 6

avevo bisogno di fare qualcosa di simile, ma sto usando jQuery, e ho trovato questo per essere una soluzione migliore:

Utilizzare la funzione di innesco di jQuery.

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

È anche possibile aggiungere parametri ad essa se è necessario. Vedere la documentazione jQuery su .trigger .

Answer 7

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

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

Answer 8

per seguirmi lavorato:

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

Inoltre:

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