Программно запускать событие onmouseover в JavaScript

Есть ли способ программно запускать событие 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

Ответы

Ответ 1

Вы сделали бы что-то вроде этого:

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

Однако, как упоминалось в комментариях, было бы целесообразно проверить, прежде чем рассматривать проблему.

Ответ 2

Это работало для меня в 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" );

Ответ 3

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

Ответ 4

Не вдаваясь в подробности, у меня был 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 );
        }
    }
}

Ответ 5

Мне пришлось пересмотреть набор функций 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 );
        }
    }
}

Ответ 6

Мне нужно было сделать что-то похожее, но я использую jQuery, и я нашел это лучшим решением:

Используйте функцию триггера jQuery.

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

Вы также можете добавить параметры к нему, если вам нужно. Смотрите документацию jQuery на .trigger.

Ответ 7

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

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

Ответ 8

У меня работает следующее:

document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));

также:

document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));