Zdarzenie wyzwalacza onmouseover programowo w kodzie JavaScript

Question

Czy istnieje sposób programowego wywołania zdarzenia onmouseover w zwykłym kodzie JavaScript? lub "wyodrębnić" metodę ze zdarzenia onmouseover, aby wywołać ją bezpośrednio?

np

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

najwyższego div jest powyżej dolnej div, więc onmouseover nie zostanie zwolniony w dolnej div. Potrzebuję sposób nazywając myFunction('some param specific to bottom-div'); od górnej div

Answer 1

Można by zrobić to tak:

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

Jednakże, jak wspomniano w komentarzach, warto byłoby rozważyć testowanie przed problemem.

Answer 2

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

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

Answer 3

muszę zrobić coś podobnego, ale używam jQuery i uważam, że jest to lepsze rozwiązanie: funkcja wyzwalania

użyć jQuery za.

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

Jeśli chcesz, możesz również dodać do niego parametry. Zobacz jQuery documentation on .trigger.

Answer 4

To zadziałało dla mnie przynajmniej w IE9. Powinny być kompatybilne z różnymi przeglądarkami lub blisko niego ...

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

Na przykład onmouseover, wywołać funkcję takiego

FireEvent(ElementId, "mouseover"); 

Answer 5

Nie wdając się w zbyt wiele szczegółów, miałem img z najazdów, tj. mouseout/overs, które ustawiają img src na ukryte wartości formularzy (lub może to zrobić w innym kontekście ze zmiennymi gloabl). Użyłem trochę javascript do zamiany obu moich wartości obrazu over/out i zadzwoniłem do Call FireEvent (ElementId, "mouseover"); aby wywołać zmianę. Mój javascript ukrywał/wyświetlał elementy na stronie. To spowodowało, że kursor czasami był nad obrazem, którego użyłem do wywołania zdarzenia - który był taki sam jak ten, który wymieniłem, a czasami kursor nie był nad obrazem po kliknięciu.

Mysz/wyjście nie uruchamia się, dopóki nie wyjdziesz i nie wrócisz do elementu, więc po uruchomieniu mojego zdarzenia, przesunięcie kursora na mysz wymaga "ponownego uruchomienia" w celu uwzględnienia nowej pozycji kursora. Oto moje rozwiązanie. Po ukryciu/wyświetleniu różnych elementów strony i wykonaniu zamiany img src zgodnie z opisem, wywołuję funkcję RefreshMouseEvents (ElementId) zamiast FireEvent (ElementId, "mouseover").

Działa to w IE9 (nie mam pewności co do innych przeglądarek).

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

Musiałem zmienić mój zestaw funkcji RefreshMouseEvents po kolejnych testach. Oto wersja pozornie dopracowane (znowu tylko przetestowane 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); 
     } 
    } 
}