web-dev-qa-db-ja.com

JavaScriptでonmouseoverイベントをプログラムでトリガーする

プレーンJavaScriptでonmouseoverイベントをプログラムでトリガーする方法はありますか？または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で発生しません。 top-divからmyFunction('some param specific to bottom-div');を呼び出す方法が必要です

javascriptdom-eventsonmouseover
26
fearofawhackplanet

これは少なくとも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" );
31
Jonathan
const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);
18
givehug

あまり詳しく説明しなくても、ロールオーバーのあるimg、つまりimg srcを非表示のフォーム値に設定するmouseout/oversがありました（または、これはgloabl変数を使用して別のコンテキストで実行できます）。いくつかのjavascriptを使用して、over/outイメージ値の両方を交換し、呼び出されたFireEvent（ElementId、 "mouseover"）;を呼び出しました。変更をトリガーします。私のjavascriptはページ上の要素を非表示/表示していました。これにより、イベントをトリガーするために使用したimgの上にカーソルが移動することがありました-これはスワップアウトしたものと同じであり、クリック後にカーソルがimgの上に移動しないことがありました。

要素を終了して再入力しない限り、マウスオーバー/アウトは発生しないため、私のイベントがトリガーされた後、マウスオーバー/アウトは新しいカーソル位置を考慮するために「再トリガー」が必要でした。これが私の解決策です。さまざまなページ要素を非表示/表示し、説明したようにimg srcスワッピングを行うために、FireEvent（ElementId、 "mouseover"）ではなくRefreshMouseEvents（ElementId）関数を呼び出します。

これは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 );
        }
    }
}
6
Jonathan

さらにテストした後、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
Jonathan

同様のことをする必要がありましたが、jQueryを使用していますが、これがより良いソリューションであることがわかりました。

JQueryのトリガー関数を使用します。

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

必要に応じて、パラメータを追加することもできます。 。triggerのjQueryドキュメント を参照してください。

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

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

私にとっては働いた：

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

また：

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