0

次のコードがあります。(これをファイルにコピーして Firefox でデバッグし、Firebug の [コンソール] タブで出力を確認できます)。

onmouseoverタグにイベントを追加liし、マウスをそのli領域に移動すると、コンソール情報が出てきます。

問題は、マウスを画像 (Google ロゴ) からその下のテキストに移動すると、複数の情報が出力されることです。onmouseoutエリアを離れていないのに、なぜイベントがトリガーされるのliですか?

onmouseoutこの状況でイベントをトリガーしないようにするにはどうすればよいですか。

ありがとうございました！！

<html>
<body>

<div>
    <ul>
        <li onmouseover="console.info('over')" onmouseout="console.info('out')" style="float:left;display:block;width:30%;height:200px;border: 2px solid red;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
        <li style="float:left;display:block;width:30%;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
        <li style="float:left;display:block;width:30%;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
    </ul>
</div>

</body>
</html>
4

2 に答える 2

3

イベントは DOM ツリーをバブルアップします。そのため、カーソルがimg要素から離れると、イベントが生成され、親要素mouseoutにバインドされたイベント ハンドラーがトリガーされます。li

この状況に対処するには、次の 2 つの方法があります。

イベントがバブリングしないようにする

イベントが発生するのを防ぎたい場合は、イベントが発生した要素にイベント ハンドラーを割り当て、eventオブジェクトのstopPropagationメソッド (またはcancelBubbleIE のプロパティ)を呼び出します。

function handler(event) {
    event = event || window.event; // IE
    if(event.stopPropagation) {
        event.stopPropagation();   // W3C
    }
    else {
        event.cancelBubble = true; // IE
    }
}

問題は、このハンドラーをすべての子要素にバインドする必要があることです。これはあまり便利ではありません。したがって、次の方法が実現しやすいです。

イベントの発生場所をテストする

event.targetイベントが（またはevent.srcElementIEで）発生した要素への参照を取得できます。要素にバインドするイベント ハンドラーは、次のliようになります。

function handler(event) {
    event = event || window.event; // IE
    var target = event.target || event.srcElement; // IE

    if(target === this) {   // event originated where the handler was bound to
        console.info('out');
    }
}

そしてそれを呼び出す

onmouseout="handler.call(this, event);"

イベント ハンドラーをinlineにバインドすることは、プレゼンテーションとアプリケーション ロジックが混在するため、悪い設計であることに注意してください。イベント ハンドラーをバインドするには、他に2 つ の方法があります。

quirksmode.org のイベント処理に関する記事を読むことをお勧めします。

于 2011-12-07T11:32:42.637 に答える
0

onMouseOverと onMouseOut に加えて、 と の概念がonMouseEnterありonMouseLeaveます。implemented実際には、さまざまなブラウザーでどのようになっているのかわかりません。私は jQuery を使用します。jQuery は私に代わってすべてのことを行います。ページの下部にあるさまざまなイベントを使用したときに何が起こっているかの素晴らしい例とともに、ここですべてをお読みください。

于 2011-12-07T11:39:54.540 に答える