Trigger onmouseover-Ereignis programmgesteuert in JavaScript auslösen

Gibt es eine Möglichkeit, programmgesteuert auslösen onmouseover Veranstaltung in plain JavaScript? oder "extrahieren" die Methode der onmouseover event direkt aufrufen?

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

top-div oberhalb bottom-div, so dass die onmouseover nicht entlassen werden, in Boden-div. ich brauche einen Weg der Berufung myFunction('some param specific to bottom-div'); von top-div

Kommentar zu dem Problem

Sie können die jquery-bind Kommentarautor: Gandalf StormCrow

Haben Sie versucht das? Das onmouseover-Ereignis sollte Feuer auf der übergeordneten Veranstaltung, auch Dank des event-propagation. Kommentarautor: Tatu Ulmanen

ok, ich glaube nicht, dass, sorry, es ist ein etwas schlechtes Beispiel, weil in meiner app, die Sie eigentlich nicht geschachtelten Elemente. die oberste div-Element ist absolut positioniert über eine Reihe von anderen Elementen. Kommentarautor: fearofawhackplanet

@Piskvor: ich war versucht, um ein sehr Komplexes Stück von html, um ein einfaches Beispiel, und ich habe einen Fehler gemacht. Sorry, wenn das Sie beleidigt. Kommentarautor: fearofawhackplanet

@fearofawhackplanet: ich entschuldige mich für mein arrogantes Kommentar, gelöscht. (sachliche Teil: "überlappende element != element-nesting") Kommentarautor: Piskvor

InformationsquelleAutor der Frage fearofawhackplanet | 2010-02-09

-5

Würden Sie es tun, so etwas wie dieses:
```
document.getElementById('top-div').onmouseover();
```
Jedoch, wie bereits erwähnt in den Kommentaren, es würde sich lohnen zu testen, bevor betrachtet wird, ist ein Problem.

InformationsquelleAutor der Antwort Yacoby

Dieser arbeitete für mich in IE9 zumindest. Sollten cross-browser-kompatibel, oder um es zu schließen...

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

Für onmouseover Beispiel, rufen Sie die Funktion wie folgt

FireEvent( ElementId, "mouseover" );

InformationsquelleAutor der Antwort Jonathan

Ohne allzu sehr ins detail, hatte ich ein img mit Rollover, d.h. mouseout/over gesetzt img src versteckter form-Werte (oder könnte dies getan haben, in einem anderen Kontext mit gloabl Variablen). Ich habe einige javascript zu tauschen, meine beiden über/aus image-Werte, und ich rief die genannte FireEvent( ElementId, "mouseover" ); auslösen, das zu ändern. Mein javascript ein - /ausblenden Elemente auf der Seite. Dies verursacht den cursor manchmal über die img, die ich verwendet, um das Ereignis auszulösen - die war die gleiche wie die, die ich austauschen, und manchmal ist der cursor nicht über die img nach dem Klick.

Mouseover/out nicht Feuer, es sei denn, Sie beenden, und geben Sie ein element, so nach meinem Fall war der Auslöser für die mouseover/out-Bedarf "verlängern", um für die neuen cursor-position. Hier ist meine Lösung. Nachdem ich ein - /ausblenden verschiedener Elemente der Seite, und mein img src tauschen, wie beschrieben, ich nenne die Funktion RefreshMouseEvents( ElementId ) anstelle von FireEvent( ElementId, "mouseover" ).

Dies funktioniert im IE9 (nicht sicher über andere 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 );
        }
    }
}

InformationsquelleAutor der Antwort Jonathan

Musste ich revidiere meine RefreshMouseEvents Satz von Funktionen, die nach mehr Tests. Hier ist das scheinbar perfektionierte version (wieder nur mit dem IE9 getestet):

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

InformationsquelleAutor der Antwort Jonathan

2

Ich brauchte, etwas ähnliches zu tun, aber ich bin mit jQuery, und ich fand, dass dies eine bessere Lösung:

Verwenden Sie die jQuery-Funktion auslösen.
```
$j('#top-div' ).trigger( 'mouseenter' );
```
Können Sie auch Parameter hinzufügen, wenn Sie müssen. Finden Sie die jQuery-Dokumentation auf .trigger.

InformationsquelleAutor der Antwort thephatp

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

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

InformationsquelleAutor der Antwort Reigel

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

InformationsquelleAutor der Antwort givehug

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.