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