Есть ли способ программно запускать событие onmouseover в простом JavaScript? или "извлечь" метод из события onmouseover, чтобы вызвать его напрямую?
например,
<div id="bottom-div" onmouseover="myFunction('some param specific to bottom-div');">
<div id="top-div" onmouseover="????????"></div>
</div>
top-div находится выше bottom-div, поэтому onmouseover не будет запущен в нижнем-div. Мне нужен способ вызова myFunction('some param specific to bottom-div'); из top-div
Вы сделали бы что-то вроде этого:
document.getElementById('top-div').onmouseover();
Однако, как упоминалось в комментариях, было бы целесообразно проверить, прежде чем рассматривать проблему.
Это работало для меня в IE9 как минимум. Должен быть совместим с кросс-браузером или близко к нему...
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 );
}
}
}
Для примера onmouseover вызовите функцию, подобную этой
FireEvent( ElementId, "mouseover" );
const mouseoverEvent = new Event('mouseover');
whateverElement.dispatchEvent(mouseoverEvent);
Не вдаваясь в подробности, у меня был img с опрокидываниями, т.е. mouseout/overs, которые устанавливали img src в скрытые значения формы (или это могло быть сделано в другом контексте с переменными gloabl). Я использовал некоторый javascript, чтобы поменять оба значения выше/вне изображения, и я назвал вызванный FireEvent (ElementId, "mouseover" ); чтобы вызвать изменение. Мой javascript скрывал/отображал элементы на странице. Это привело к тому, что курсор иногда находился над img, который я использовал для запуска события - это было то же самое, что и я, который меня заменял, и иногда курсор не был над img после щелчка.
Mouseover/out не срабатывает, если вы не выходите и не вводите элемент повторно, поэтому после того, как мое событие было запущено, наведение/выключение потребовало "перезапуска" для учета новой позиции курсора. Вот мое решение. После того, как я скрою/отображу различные элементы страницы и сделаю замену img src, как описано, я вызываю функцию RefreshMouseEvents (ElementId) вместо FireEvent (ElementId, "mouseover" ).
Это работает в IE9 (не уверен в других браузерах).
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 );
}
}
}
Мне пришлось пересмотреть набор функций RefreshMouseEvents после тестирования. Вот, казалось бы, усовершенствованная версия (снова тестировалась только 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 );
}
}
}
Мне нужно было сделать что-то похожее, но я использую jQuery, и я нашел это лучшим решением:
Используйте функцию триггера jQuery.
$j('#top-div' ).trigger( 'mouseenter' );
Вы также можете добавить параметры к нему, если вам нужно. Смотрите документацию jQuery на .trigger.
<a href="index.html" onmouseover="javascript:alert(0);" id="help">help</a>
document.getElementById('help').onmouseover();
У меня работает следующее:
document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));
также:
document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));