onmouseover と onmouseout についての考え_基礎知識-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:25:48

オリジナル

1338 人が閲覧しました

DIV レイヤーの場合、マウスが内側に移動すると onmouseover がトリガーされ、マウスが外側に移動すると onmouseout がトリガーされます。
onmouseover と onmouseout についての考え_基礎知識
単純なロジック、これが私たちが望んでいることです。しかし、その後問題が発生します。onmouseover は移動するときだけトリガーされるわけではなく、onmouseout は移動するときだけトリガーされるわけではありません。 onmouseover または onmouseout は、マウスが DIV 内に移動したときにトリガーされる場合もあります。
onmouseover と onmouseout についての考え_基礎知識
上の図では、'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 イベントでマウスが移動する要素を指します