onmouseover と onmouseout についての考え_基礎知識

DIV レイヤーの場合、マウスが内側に移動すると onmouseover がトリガーされ、マウスが外側に移動すると onmouseout がトリガーされます。

単純なロジック、これが私たちが望んでいることです。しかし、その後問題が発生します。onmouseover は移動するときだけトリガーされるわけではなく、onmouseout は移動するときだけトリガーされるわけではありません。 onmouseover または onmouseout は、マウスが DIV 内に移動したときにトリガーされる場合もあります。

上の図では、'A': マウスが 'A' (パス '1') に入ると、'A' の onmouseover イベントがトリガーされ、マウスは ' に移動します。 B' (パス '2')、この時点では 'A' が onmouseout (最初) および onmouseover (最後) イベントをトリガーします。

HTML 要素 ('A' レイヤー) 内に他の要素 ('B'、'C' レイヤー) がある場合、これらの内部要素に移動すると最も外側のレイヤーがトリガーされることがわかります。 . (「A」レイヤー) onmouseout および onmouseover イベント。

これら 2 つのイベントのトリガーとなる動作は、本当に望んでいることですか?おそらく、内部に他の要素があるかどうかに関係なく、移動したときにのみ起動するイベントと、移動したときにのみ起動するイベントが必要かもしれません。

解決策

IE では確かに、onmouseenter と onmouseleave という 2 つのイベントが必要です。残念ながら、FF などの他のブラウザはこれをサポートしていないため、実装をシミュレートする必要があります:

コードをコピー コードは次のとおりです。次のように:

document.getElementById('...').onmouseover = function(e){
if( !e ) e = window.event
var reltg = e.popularTarget ? e.popularTarget : e.fromElement;
while( reltg && reltg != this ) reltg = reltg.parentNode;
if( reltg != this ){
// onmouseenter イベントの処理コード
}
}
document.getElementById('...').onmouseout = function(e){
if( !e ) e = window.event;
var reltg = e.popularTarget ? e .popularTarget : e.toElement;
while( reltg && reltg != this )
if( reltg != this ){
// ここで、onmouseleave イベントの処理コードを記述できます
}
}

注:

W3C は、マウスオーバー イベントとマウスアウト イベントに関連するTarget 属性を追加しました

• マウスオーバー イベントでは、どの要素からマウスを表します
• マウスアウト イベントでは、マウスが移動する要素を指します
そして、Microsoft はマウスオーバー イベントとマウスアウト イベントに 2 つのプロパティを追加しました

• fromElement、mouseover イベントで表されます マウスがどの要素から来たのか
• toElement、mouseout イベントでマウスが移動する要素を指します