evento de disparo onmouseover de programação em JavaScript

Question

Existe uma maneira para acionar programaticamente o evento onmouseover em JavaScript simples? ou "extrair" o método do evento onmouseover chamá-lo diretamente?

ex

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

top-div está acima bottom-div, de modo que o onmouseover não vai ser demitido em bottom-div. Eu preciso de uma maneira de chamar myFunction('some param specific to bottom-div'); de top-div

Answer 1

Você faria algo assim:

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

No entanto, como mencionado nos comentários, que valeria a pena testar antes de ser considerado um problema.

Answer 2

Isso funcionou para mim no IE9, pelo menos. Deve ser cross-browser compatível ou perto disso ...

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 onmouseover exemplo, chamar a função como esta

FireEvent( ElementId, "mouseover" );

Answer 3

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

Answer 4

Sem entrar em muitos detalhes, eu tive uma img com sobreposições, ou seja mouseout / overs que definir o src img para valores ocultos de formulário (ou este poderia ter feito em um contexto diferente com variáveis ??gloabl). Eu usei algumas javascript para trocar ambas as minhas over / out valores de imagem e liguei para o FireEvent chamado (ElementID, "mouseover"); para provocar a mudança. Meu javascript estava escondido / exibindo elementos na página. Isso fez com que o cursor para ser às vezes sobre o img I utilizado para disparar o evento - que era o mesmo que o que eu estava trocando para fora, e às vezes o cursor não era sobre o img após o clique.

Mouseover / out não dispara a menos que você sair e voltar a entrar um elemento, por isso depois do meu evento foi disparado o mouseover / out necessário "retriggering" para a conta para a nova posição do cursor. Aqui está a minha solução. Depois que eu ocultar / mostrar vários elementos da página e fazer o meu img src troca como descrito, eu chamo os RefreshMouseEvents função (ElementID) em vez de FireEvent (ElementID, "mouseover").

Isso funciona no IE9 (não tenho certeza sobre outros 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

Eu tive de rever meus RefreshMouseEvents conjunto de funções depois de mais testes. Aqui é a versão aparentemente aperfeiçoado (novamente apenas IE9 testado):

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

Eu precisava fazer algo semelhante, mas eu estou usando jQuery, e eu achei que isso seja uma solução melhor:

função de gatilho de Uso jQuery.

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

Você também pode adicionar parâmetros a ele se você precisa. Veja a documentação do jQuery em .trigger .

Answer 7

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

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

Answer 8

Para me seguindo trabalhou:

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

Além disso:

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