マウスがdiv内の別のレイヤーに移動すると、マウスアウトがトリガーされます

クズども · 掲載地 2018/12/17 14:57:53

DIV要素の話が出たところで、内部にはIMG要素とSPAN要素があります。これら2つの内部要素の配置は気にしないでください。ここは私が議論したい話題ではありません。

特殊効果を得るためには、TDのonmouseoverとonmouseoutイベントを使う必要があり、テストすると次のような状況が見つかります。

マウスがDIV内に入るとonmouseoverイベントが発生します。次に、マウスをDIV内のIMGまたはSPAN要素に移動させます。マウスがDIVの外側に移動したとは思えませんが、奇妙なことにonmouseoutイベントがトリガーされ、onmouseoverイベントも即座に発生します。

これは私が望んでいるものではありません。では、内部要素から外部要素へのJavascrip{filtering}tイベントの干渉をどうやって「ブロック」できるのでしょうか?

こちらは2つの方法です:

1. setTimeout

マウスが内側の要素を移動し、外側の要素のonmouseoutイベントをトリガーすると、外側の要素のonmouseoverも即座にトリガーされるため、外側要素のonmouseoutイベントを実行する動作を短時間遅らせて実行し、その後onmouseoverイベントでclearTimeoutメソッドを実行して、内部要素によるイベント干渉を避ける必要があります。

具体的な実行プロセスについては以下の図(縦点線は時間を表します)をご覧ください。

これは賢いアプローチで、onmouseoutがトリガーされると実質的なメソッドはすぐに実行されるのではなく、短時間待機します。この時間中にonmouseoverイベントが即座にトリガーされた場合、内部要素からの干渉によりonmouseoutイベントがトリガーされていることはほぼ確実なので、onmouseoverイベントでclearTimeoutを使って遅延メソッドの実行を防ぎましょう。

2. 包含

onmouseover時に次の判断を行い、結果が真になったらメソッド本体を実行します。

ログインが見えます。

onmouseout時に次の判断を行い、結果が真になったらメソッド本体を実行します。

ログインが見えます。

以下は上記の2行のコードの意味の説明です:

IEでは、すべてのHTML要素が、現在の要素に指定された要素が含まれているかどうかを判定するcontainメソッドがあります。この手法を使って、外部要素のイベントが内部要素によってトリガーされるかどうかを判定し、内部要素が不要なイベントを引き起こした場合は無視します。

event.fromElementはonmouseoverおよびonmouseoutイベントがトリガーされた際にマウスが離れる要素を指し示し、event.toElementはonmouseoverおよびonmouseoutイベントがトリガーされた際にマウスが入る要素を示します。

したがって、上記の2行のコードの意味は以下の通りです:

onmouseoverイベントがトリガーされると、マウスが残した要素が現在の要素の内部要素かどうかを判定し、もしそうであればこのイベントを無視します。
onmouseoutイベントが発生した際、マウスが入力した要素が現在の要素の内部要素かどうかを判断し、もしそうならこのイベントを無視します。

こうすることで、内側の要素が外側の要素のオンマウスオーバーおよびオンマウスアウトのイベントに干渉しません。

しかし問題は、非IEブラウザはinclude関数をサポートしていないことです。しかし、今度はinclude関数の関数がわかったので、非IEブラウザ向けのIncludeサポートを追加するために以下のコードを追加できます。

ログインが見えます。

上記の方法はFirefoxとは互換性がありません:

ポイントはjQueryです:

jクエリmouseoutの代わりにmouseleaveを使ってください、上記のことが起こらないようにする。

また、マウスオーバーは繰り返しトリガーされるので、代わりにmouseenterを使ってください。

完璧な解決策~

[JavaScript] マウスがdiv内の別のレイヤーに移動すると、マウスアウトがトリガーされます

関連記事

閲覧したセクション