ejemplo - onmouseover javascript
Desencadenar el evento onmouseover programáticamente en JavaScript (7)
¿Hay alguna manera de activar mediante programación el evento onmouseover en JavaScript plano? ¿O "extraer" el método del evento onmouseover para llamarlo directamente?
p.ej
<div id="bottom-div" onmouseover="myFunction(''some param specific to bottom-div'');">
<div id="top-div" onmouseover="????????"></div>
</div>
top-div está por encima de bottom-div, por lo que onmouseover no se activará en bottom-div. necesito una forma de llamar a myFunction(''some param specific to bottom-div''); de top div
Esto funcionó para mí en IE9 al menos. Debe ser compatible con el navegador cruzado o cerca de él ...
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 );
}
}
}
Para el ejemplo de onmouseover, llame a la función como esta
FireEvent( ElementId, "mouseover" );
Lo harías algo como esto:
document.getElementById(''top-div'').onmouseover();
Sin embargo, como se menciona en los comentarios, valdría la pena probar antes de que se considere un problema.
Necesitaba hacer algo similar, pero estoy usando jQuery, y encontré que esta es una mejor solución:
Usa la función de disparo de jQuery.
$j(''#top-div'' ).trigger( ''mouseenter'' );
También puede agregarle parámetros si lo necesita. Consulte la documentación de jQuery en .trigger .
Sin entrar en demasiados detalles, tuve un img con reinversiones, es decir, mouseout / overs que configuran el img src en valores de forma ocultos (o esto podría haberlo hecho en un contexto diferente con variables globales). Utilicé algunos javascript para intercambiar mis valores de imagen de arriba / fuera y llamé a FireEvent llamado (ElementId, "mouseover"); para desencadenar el cambio. Mi javascript estaba ocultando / mostrando elementos en la página. Esto causó que el cursor a veces estuviera sobre el img que solía activar el evento, que era el mismo que el que estaba intercambiando, y algunas veces el cursor no estaba sobre el img después del clic.
La activación / desactivación del mouse no se activa a menos que salga y vuelva a ingresar un elemento, por lo tanto, después de que se activara mi evento, la "activación / desactivación" del mouseover necesario para tener en cuenta la nueva posición del cursor. Aquí está mi solución. Después de ocultar / mostrar varios elementos de la página, y para realizar mi intercambio de 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 );
}
}
}
Tuve que revisar mi conjunto de funciones RefreshMouseEvents después de más pruebas. Aquí está la versión aparentemente perfeccionada (de nuevo, solo IE9 probado):
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 );
}
}
}
const mouseoverEvent = new Event(''mouseover'');
whateverElement.dispatchEvent(mouseoverEvent);
<a href="index.html" onmouseover="javascript:alert(0);" id="help">help</a>
document.getElementById(''help'').onmouseover();