Trigger onmouseover-Ereignis programmgesteuert in JavaScript

Question

Gibt es eine Möglichkeit, das Ereignis onmouseover programmgesteuert in einfachen JavaScript auszulösen? oder "extrahiere" die Methode aus dem onmouseover Ereignis, um es direkt aufzurufen?

zB

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

Top-div ist oben unten div, so dass die onmouseover nicht in Bottom-div gefeuert. Ich brauche eine Art von myFunction('some param specific to bottom-div'); von oben div

Answer 1

rufen Sie würde es so etwas tun:

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

jedoch, wie in den Kommentaren erwähnt, wäre es wert Test sein, bevor ein Problem betrachtet wird.

Answer 2

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

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

Answer 3

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

Verwenden jQuery-Trigger-Funktion.

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

Sie können bei Bedarf auch Parameter hinzufügen. Siehe jQuery documentation on .trigger.

Answer 4

Dies funktionierte für mich in IE9 mindestens. Sollte sein Cross-Browser-kompatibel oder nahe daran ...

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

Answer 5

Ohne zu sehr ins Detail zu gehen, hatte ich ein img mit Rollovers, dh mouseout/overs, die den img src auf versteckte Formwerte setzen (oder dies könnte in einem anderen Kontext mit globalen Variablen getan haben). Ich benutzte etwas Javascript, um beide meiner over/out Bildwerte zu tauschen, und ich nannte den angerufenen FireEvent (ElementId, "mouseover"); um die Änderung auszulösen. Mein Javascript hat Elemente auf der Seite versteckt/angezeigt. Dies führte dazu, dass der Cursor manchmal über dem Bild lag, das ich zum Auslösen des Ereignisses verwendet hatte - das war das gleiche wie das, das ich auswechselte, und manchmal befand sich der Cursor nach dem Klick nicht über dem Bild.

MouseOver/out wird nur ausgelöst, wenn Sie ein Element verlassen und erneut eingeben. Nachdem mein Ereignis ausgelöst wurde, musste der Mouseover/-Ausgang neu getriggert werden, um die neue Cursorposition zu berücksichtigen. Hier ist meine Lösung. Nachdem ich verschiedene Seitenelemente ein-/ausgeblendet habe und mein img src-swapping wie beschrieben mache, rufe ich die Funktion RefreshMouseEvents (ElementId) anstelle von FireEvent (ElementId, "mouseover") auf.

Dies funktioniert in 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); 
     } 
    } 
} 

Answer 6

Ich musste meine RefreshMouseEvents-Funktionen nach weiteren Tests überarbeiten. Hier ist die scheinbar ausgereifte Version (wieder nur 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); 
     } 
    } 
}