Запуск события onmouseover программно в JavaScript

Question

Есть ли способ программно запустить 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 не будет уволен в bottom-div.мне нужен способ позвонить myFunction('some param specific to bottom-div'); сверху-div

Answer 1

Вы бы сделали это примерно так:

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

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

Answer 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" );

Answer 3

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

Answer 4

Не вдаваясь в подробности, у меня был img с ролловерами, т.е.mouseout/overs, которые устанавливают для img src значения скрытой формы (или это можно было сделать в другом контексте с переменными globabl).Я использовал некоторый javascript, чтобы поменять местами оба значения изображения над/выходом, и вызвал метод FireEvent( ElementId, "mouseover");чтобы вызвать изменение.Мой javascript скрывал/показывал элементы на странице.Из-за этого курсор иногда находился над изображением, которое я использовал для запуска события, которое было таким же, как и то, которое я заменял, а иногда курсор не находился над изображением после щелчка.

Наведение курсора/выход не срабатывает, если вы не выйдете и не войдете повторно в элемент, поэтому после того, как мое событие было вызвано, наведение курсора/выход потребовало «повторного запуска», чтобы учесть новую позицию курсора.Вот мое решение.После того, как я скрыл/отобразил различные элементы страницы и выполнил замену 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 );
        }
    }
}

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

Answer 6

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

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

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

При необходимости вы также можете добавить к нему параметры.См. Документация jQuery по .trigger.

Answer 7

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

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

Answer 8

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

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

Также:

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