Activación del evento onmouseover programáticamente en JavaScript

Question

¿Hay alguna forma de activar mediante programación el evento onmouseover en JavaScript normal? o "extraer" el método del evento onmouseover para llamarlo directamente?

por ejemplo

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

de arriba está por encima div div abajo, por lo que el onmouseover no será despedida en la parte inferior-div. Necesito una manera de llamar myFunction('some param specific to bottom-div'); de arriba-div

Answer 1

que lo haría algo como esto:

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

Sin embargo, como se mencionó en los comentarios, que valdría la pena la prueba antes de ser considerado un problema.

Answer 2

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

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

Answer 3

que tenía que hacer algo similar, pero estoy usando jQuery, y me pareció que esto sea una mejor solución: la función de disparo de

Uso de jQuery.

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

También puede agregar parámetros si es necesario. Vea el jQuery documentation on .trigger.

Answer 4

Esto funcionó para mí en IE9 al menos. En caso de ser multi-navegador compatible o cerca de ella ...

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

Por ejemplo onmouseover, llamar a la función como esta

FireEvent(ElementId, "mouseover"); 

Answer 5

Sin entrar en demasiados detalles, tuve una img con vuelcos, es decir, mouseout/overs que establece el img src en valores de forma oculta (o esto podría haberlo hecho en un contexto diferente con variables gloabl). Utilicé algunos javascript para intercambiar mis valores de imagen over/out y llamé a FireEvent (ElementId, "mouseover"); para desencadenar el cambio. Mi javascript estaba ocultando/mostrando elementos en la página. Esto hizo que el cursor a veces estuviera sobre el img que utilicé para desencadenar el evento, que era el mismo que estaba intercambiando, y algunas veces el cursor no estaba sobre el img después del clic.

El mouseover/out no se dispara a menos que salga y vuelva a ingresar un elemento, por lo que después de que se activó el evento, el mouseover/out necesitaba "volver a disparar" para tener en cuenta la nueva posición del cursor. Aquí está mi solución. Después de que ocultar/mostrar varios elementos de página, y para hacer mi intercambio img src como se describe, llamo a la función RefreshMouseEvents (ElementId) en lugar de FireEvent (ElementId, "mouseover").

Esto funciona en IE9 (no estoy seguro acerca de otros 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 6

Tuve que revisar mi conjunto de funciones RefreshMouseEvents después de más pruebas. Aquí está la versión aparentemente perfeccionado (de nuevo sólo probó 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); 
     } 
    } 
}