49

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 の上にあるため、bottom-div では発生しonmouseoverません。myFunction('some param specific to bottom-div');トップ div から呼び出す方法が必要です

4

8 に答える 8

39

これは、少なくとも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" );
于 2012-12-01T00:17:49.083 に答える
19

私にとっては、次のように機能しました：

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

また：

​document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));
于 2019-08-15T04:03:12.400 に答える
7

さらにテストを行った後、関数の 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 );
        }
    }
}
于 2012-12-06T16:48:32.170 に答える
7

詳細には入りませんが、ロールオーバー、つまり、img src を非表示のフォーム値に設定するマウスアウト/オーバーを含む img がありました (または、gloabl 変数を使用して別のコンテキストで実行できた可能性があります)。いくつかの JavaScript を使用して、画像のオーバー/アウト値の両方を交換し、呼び出された FireEvent( ElementId, "mouseover" ); を呼び出しました。変更をトリガーします。私のJavaScriptは、ページ上の要素を非表示/表示していました。これにより、イベントをトリガーするために使用した画像の上にカーソルが置かれることがありました。これは、スワップアウトしていたものと同じで、クリック後にカーソルが画像の上にないこともありました。

要素を終了して再入力しない限り、マウスオーバー/アウトは発生しないため、イベントがトリガーされた後、新しいカーソル位置を考慮するためにマウスオーバー/アウトに「再トリガー」が必要でした。これが私の解決策です。さまざまなページ要素を非表示/表示し、説明に従って 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 );
        }
    }
}
于 2012-12-02T01:07:47.553 に答える
3

同様のことをする必要がありましたが、jQueryを使用しており、これがより良い解決策であることがわかりました。

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

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

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

于 2012-08-24T02:52:56.283 に答える
1 
​&lt;a href="index.html" onmouseover="javascript:alert(0);" id="help"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;help</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

​document.getElementById('help').onmouseover();​​​​​​​
于 2010-07-07T05:59:48.903 に答える
-29

次のようにします。

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

ただし、コメントで述べたように、問題と見なされる前にテストする価値があります。

于 2010-02-09T10:44:44.550 に答える