Вопрос по javascript, javascript-events, onmouseover – Запуск события onmouseover программно в JavaScript

21

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

Вы пробовали это? Событие переездадолжен Огонь родительского события также благодаря распространению события. Tatu Ulmanen
@fearofawhackplanet: я прошу прощения за мой высокомерный комментарий, удален. (фактическая часть: "перекрытие элементов! = вложение элементов") Piskvor
@Piskvor: я пытался свести очень сложный кусок HTML к простому примеру, и я допустил ошибку. Извините, если это вас оскорбляет. fearofawhackplanet
Хорошо, я не думал об этом, извините, это немного плохой пример, потому что в моем приложении они не являются вложенными элементами. верхний div абсолютно позиционируется над рядом других элементов. fearofawhackplanet
Вы можете использовать jquery bind Gandalf StormCrow

Ваш Ответ

7   ответов
1
​<a href="index.html" onmouseover="javascript:alert(0);" id="help"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​>help</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

​document.getElementById('help').onmouseover();​​​​​​​
9
const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);
Прокрутите вниз, надеясь, что я найду что-то подобное ESR
Иногда наведение мышки не работает, ноmouseenter делает.const evt = new Event('mouseenter'); whateverElement.dispatchEvent(evt); brianf
-5

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

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

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

@fearofawhackplanet Пожалуйста, рассмотрите возможность принятия другого ответа. Этот не будет работать всамый случаев и не рекомендуется - это будет работать только тогда, когда функция связана сonmouseover собственность, ноaddEventListener является предпочтительным для этого. Этот ответ не работает для этого стандартного API, однако наиболее одобренный ответ подойдет для любого подхода. Sebastian Simon
Я не уверен, сработало ли это когда-либо, но я полагаю, что это должно быть по крайней мере без префикса «on». Ja͢ck
я не понимал, что это было так просто! Я уверен, что я пытался сделать то же самое с OnClick и раньше, и это не работает. возможно у меня плохая память. fearofawhackplanet
Не работаетUncaught TypeError: e.previousElementSibling.onmouseover is not a function(…) Green
3

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

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

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

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

Возможно, потому что OP говорит, что они ищут решение "в простом Javascript"? bigsee
Я нахожу это веселым, когда люди понижают голос за ответ и не говорят путь. Поэтому, чтобы тот, кто отрицательно оценил мой ответ, пожалуйста, объясните, почему я могу узнать что-то новое. Я не предлагаю, чтобы мой ответ был лучшим, но он сработал для меня. Если вы обнаружили проблему с ней, пожалуйста, добавьте комментарий, чтобы мы могли знать, почему, или еще лучше, чтобы я мог улучшить свой ответ. thephatp
6

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

Это работало для меня в 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" );
Для чего это стоит,initEvent устарела и не следует полагаться в соответствии с MDNdeveloper.mozilla.org/en-US/docs/Web/API/Event/initEvent .. и пример, который может быть вelse блок выше это:var event = new MouseEvent(EventName, { 'view': window, 'bubbles': true, 'cancelable': true }); document.getElementById(ElementId).dispatchEvent(event); james
6

Не вдаваясь в подробности, у меня было 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 );
        }
    }
}
Не используйте setTimeout как eval! Вместо этого используйтеFunction.prototype.bind. Jack Giffin

Похожие вопросы