jqueryのmouseenterについての深い理解

前に話しましょう: まず、現在の要素が element であると仮定して、mouseover イベント にはバブリング特性があります。これは、マウスが他の要素から要素に移動するかどうかに関係なく、それを意味します。要素の子要素から 要素に移動すると、mouseover イベントがトリガーされます。 Mouseenter イベントの場合、このイベントにはバブリング機能がありません。つまり、マウスが要素内を「さまよっている」場合、mouseenter はトリガーされません。具体的な例については、この例を参照し、クリックしてリンクを開いてください。

前提は終わったので、mouseoverを使用してmouseenterを実装する方法を説明します。

まず、jQueryがどのように実装されているかを見てみましょう。jQueryでmouseenterとmouseleaveを実装するコードは次のとおりです:

jQuery.each({
	mouseenter: "mouseover",
	mouseleave: "mouseout"
}, function( orig, fix ) {
	jQuery.event.special[ orig ] = {
		delegateType: fix,
		bindType: fix,

		handle: function( event ) {
			var ret,
				target = this,
				related = event.relatedTarget,
				handleObj = event.handleObj;

			// For mousenter/leave call the handler if related is outside the target.
			// NB: No relatedTarget if the mouse left/entered the browser window
			if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
				event.type = handleObj.origType;
				ret = handleObj.handler.apply( this, arguments );
				event.type = fix;
			}
			return ret;
		}
	};
});

他の部分は見る必要はありません。 と組み合わせた条件を使用すると、関連が空または未定義の場合、マウスがウィンドウに移動したことを意味し、この時点でマウスが要素を通過したはずであることがわかります。なぜこれが確実なのでしょうか? 知っておく必要があるのは、基礎となる判定ステートメントがマウスオーバー イベントで処理されるということです。それがウィンドウの場合、その要素が「通過」したはずです。 " 要素。.

次に、2 番目の条件、relative!==target && !jQuery.contains(target,popular) を見てください。 target=this; では、target が要素を指し、どの要素が要素に移動するのかを示す関連点がわかります。mouseover と Mouseenter の違いは、子要素から対応する要素に移動するときにトリガーされるかどうかであることがわかります。 。この状況は、関連!==ターゲット && jQuery.contains(ターゲット, 関連) を使用して除外できます。

前の段落の説明を通じて、この条件の機能は、別の要素から要素に移動された場合に、要素のサブ要素から移動されるかどうかを決定することであることがわかりました。移動される場合、イベントは移動されません。そうでない場合 (!jQuery.contains(target,popular)) は、要素の「外側」から移動されたことを意味し、マウスが要素を通過したことを意味し、イベントをトリガーする必要があります。

もちろん、これは jQuery で実装されます。ネイティブ js コードを使用して実装したい場合は、relationalTarget と組み合わせることができます。もちろん、IE では、fromElement と toElement の組み合わせを使用してこれを実現できます。

これは私自身の学習過程の記録です。私の理解が間違っている可能性がありますので、皆さんがコメントで指摘していただければ幸いです。

以上がjqueryのmouseenterについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。