web-dev-qa-db-fra.com

Déclencher un événement onmouseover par programmation en JavaScript

Existe-t-il un moyen de déclencher par programmation l'événement onmouseover en JavaScript simple? ou "extraire" la méthode de l'événement onmouseover pour l'appeler directement?

par exemple

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

top-div est au-dessus de bottom-div, donc le onmouseover ne sera pas viré dans bottom-div. j'ai besoin d'un moyen d'appeler myFunction('some param specific to bottom-div'); depuis top-div

javascriptdom-eventsonmouseover
34
fearofawhackplanet

Cela a fonctionné pour moi dans IE9 au moins. Devrait être compatible avec plusieurs navigateurs ou proche de celui-ci ...

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

Pour l'exemple onmouseover, appelez la fonction comme ceci

FireEvent( ElementId, "mouseover" );
31
Jonathan
const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);
18
givehug

Sans entrer dans trop de détails, j'ai eu un img avec des survols, c'est-à-dire mouseout/overs qui a défini l'img src sur des valeurs de formulaire cachées (ou cela aurait pu le faire dans un contexte différent avec des variables gloabl). J'ai utilisé un peu de javascript pour permuter mes deux valeurs d'image sur/en dehors et j'ai appelé le FireEvent appelé (ElementId, "mouseover"); pour déclencher le changement. Mon javascript masquait/affichait des éléments sur la page. Cela faisait que le curseur était parfois au-dessus de l'img que j'avais utilisé pour déclencher l'événement - qui était le même que celui que j'échangeais, et parfois le curseur n'était pas au-dessus de l'img après le clic.

Le survol/sortie ne se déclenche que si vous quittez et entrez à nouveau un élément. Par conséquent, après le déclenchement de mon événement, le survol/sortie nécessitait une "redéclenchement" pour tenir compte de la nouvelle position du curseur. Voici ma solution. Après avoir masqué/affiché divers éléments de page et pour effectuer mon échange img src comme décrit, j'appelle la fonction RefreshMouseEvents (ElementId) au lieu de FireEvent (ElementId, "mouseover").

Cela fonctionne dans IE9 (pas sûr des autres navigateurs).

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

J'ai dû réviser mon ensemble de fonctions RefreshMouseEvents après plus de tests. Voici la version apparemment perfectionnée (encore une fois testée uniquement par IE9):

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

J'avais besoin de faire quelque chose de similaire, mais j'utilise jQuery, et j'ai trouvé que c'était une meilleure solution:

Utilisez la fonction de déclenchement de jQuery.

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

Vous pouvez également y ajouter des paramètres si vous en avez besoin. Voir la documentation jQuery sur .trigger .

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

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

Pour moi, ce qui suit a fonctionné:

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

Aussi:

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