Activar evento onmouseover mediante programación en JavaScript

Question

¿Hay alguna manera de activar mediante programación el onmouseover evento en JavaScript simple?o "extraer" el método del onmouseover evento para llamarlo directamente?

p.ej

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

top-div está por encima de bottom-div, por lo que el onmouseover no será despedido en la división inferior.necesito una forma de llamar myFunction('some param specific to bottom-div'); desde el div superior

Answer 1

Se podría hacer algo como esto:

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

Sin embargo, como se mencionó en los comentarios, que valdría la pena probar antes de ser considerado un problema.

Answer 2

Esto funcionó para mí al menos en IE9.Debería ser compatible con todos los navegadores o casi...

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

Para el ejemplo de onmouseover, llame a la función de esta manera

FireEvent( ElementId, "mouseover" );

Answer 3

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

Answer 4

Sin entrar en demasiados detalles, que tenía una img con vuelcos, es decir mouseout / off que establecen el img src a los valores ocultos de formulario (o esto podría haber hecho en un contexto diferente con variables gloabl). He utilizado algunas javascript para intercambiar mis dos valores de entrada / salida imagen una y llamé a la llamada FireEvent (elementId, "mouseover"); para activar el cambio. Mi Javascript se ocultaba / mostrar elementos de la página. Esto hizo que el cursor sea a veces más de la img he usado para lanzar el evento - que era la misma que la que yo estaba intercambiando, y en ocasiones el cursor no había terminado la img después del clic.

Mouseover de entrada / salida no se dispara a menos que salga y vuelva a entrar en un elemento, por lo que después de mi evento se activó el ratón encima de entrada / salida sea necesario "retriggering" para dar cuenta de la nueva posición del cursor. Aquí está mi solución. Después de que Ocultar / Mostrar diversos elementos de la página, y hacer mi img src intercambio como se describe, que llame a la función (RefreshMouseEvents elementId) en lugar de FireEvent (elementId, "mouseover").

Esto funciona en IE9 (no estoy seguro acerca de otros navegadores).

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

he tenido que revisar mis RefreshMouseEvents conjunto de funciones después de más pruebas. Aquí está la versión aparentemente perfeccionado (de nuevo sólo IE9 probado):

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

que tenía que hacer algo similar, pero estoy usando jQuery, y me pareció que para ser una mejor solución:

Utilice la función de disparo de jQuery.

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

También puede añadir parámetros a él si es necesario. Consulte la documentación de jQuery en .trigger .

Answer 7

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

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

Answer 8

Para mi siguiente trabajé:

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

También:

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