HTML要素のMouseイベントが内部要素に干渉される問題を解決_html/css_WEB-ITnose

内部に SPAN 要素を含む DIV 要素があり、いくつかの特殊効果を実現するには、DIV 要素の onmouseover イベントと onmouseout イベントを使用する必要があります。
マウスが移動したとき。 DIV 内に移動すると、onmouseover イベントがトリガーされます。その後、マウスが DIV 内の SPAN 要素上に移動します。この時点ではマウスが DIV の外に移動したとは考えられませんが、奇妙なことに、onmouseout イベントが発生します。 DIV 要素がトリガーされ、DIV 要素の onmouseover イベントも即座にトリガーされます。
これは私が望んでいることではありません。それでは、内部要素によって外部要素に引き起こされる Javascript イベントの干渉を「シールド」するにはどうすればよいでしょうか?
ここに 2 つのメソッドがあります:

1. setTimeout

マウスが内部要素上に移動し、外部要素の onmouseout イベントがトリガーされると、外部要素の onmouseover イベントもすぐにトリガーされるため、次の操作のみが必要です。外部要素を設定します。要素の onmouseout イベントは、内部要素によって引き起こされるイベント干渉を避けるために、アクションの実行を短期間遅延させてから、onmouseover イベントで clearTimeout メソッドを実行する必要があります。
具体的な実行プロセスについては、以下の図を参照してください (垂直点線は時間を示します):

これは非常に賢いメソッドです。onmouseout がトリガーされると、実質的なメソッドはすぐには実行されず、少し待つ必要があるためです。期間。この期間中に onmouseover イベントがすぐに再びトリガーされた場合、内部要素からの干渉により onmouseout イベントがトリガーされることは基本的に確実であるため、メソッドの実行の遅延を防ぐために onmouseover イベントで ClearTimeout が使用されます。

2. contains

onmouseover で呼び出されるメソッドに以下の判定を追加し、結果が false の場合にメソッド本体を実行します:

if(this.contains(event.fromElement)){return;}

onmouseout で呼び出されるメソッドに以下の判定を追加してメソッドを実行します結果が false の場合の本文:

if(this.contains(event.toElement)){return;}

上記 2 行のコードの意味を説明しましょう: IE では、すべての HTML 要素に contains メソッドがあり、現在の要素に指定された要素が含まれているかどうかを判断するために使用されます。要素。このメソッドを使用して、内部要素によって外部要素のイベントがトリガーされるかどうかを判断します。内部要素によって不要なイベントがトリガーされる場合、そのイベントは無視されます。

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

上記の 2 行のコードの意味は次のとおりです。
onmouseover イベントがトリガーされると、マウスが離れた要素が現在の要素の内部要素であるかどうかを判断します。そうであれば、このイベントを無視します。トリガーされた場合、その要素が現在の要素の内部要素であるかどうかを判断し、その場合はこのイベントを無視します
このようにして、内部要素は外部要素の onmouseover イベントと onmouseout イベントに干渉しません。

しかし、IE 以外のブラウザは contains 関数をサポートしていません。ただし、contains 関数の機能はすでにわかっているので、次のコードを追加して、IE 以外のブラウザに contains のサポートを追加できます。

りー