Запуск события 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'); из топ-див

Answer 1

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

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

Answer 3

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

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

Mouseover / out не срабатывает, если вы не выходите и не вводите элемент заново, поэтому после того, как мое событие было запущено, 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 );
        }
    }
}

Answer 5

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

Используйте функцию триггера jQuery.добавьте параметры к нему, если вам нужно.См. Документацию jQuery на .trigger .

Answer 6

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

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

Answer 7

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

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

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