Vertiefendes Verständnis der Mauseingabe in JQuery

Lassen Sie uns früher darüber sprechen: Lassen Sie uns zunächst über den Unterschied zwischen den beiden sprechen. Unter der Annahme, dass das aktuelle Element ein Element ist, weist das Mouseover-Ereignis eine Blasencharakteristik auf, was bedeutet, dass es keine Rolle spielt, ob sich die Maus bewegt von anderen Elementen zu Element oder Das Mouseover-Ereignis wird ausgelöst, wenn Sie vom untergeordneten Element von Element zu Element wechseln. Für das Mouseenter-Ereignis verfügt dieses Ereignis über keine Bubbling-Funktion, was bedeutet, dass das Mouseenter-Ereignis nur ausgelöst wird, wenn die Maus durch das Ereignis läuft. Wenn die Maus innerhalb des Elements „wandert“, wird das Mouseenter-Ereignis nicht ausgelöst. Konkrete Beispiele finden Sie in diesem Beispiel. Klicken Sie hier, um den Link zu öffnen.

Nachdem die Prämisse nun abgeschlossen ist, erfahren Sie, wie Sie Mouseover verwenden, um MouseEnter zu implementieren!

Sehen wir uns zunächst an, wie

jQuery implementiert wird. Hier ist der Code zum Implementieren von Mouseenter und Mouseleave in jQuery:

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;
		}
	};
});

Schauen Sie sich nicht an Bei anderen ist der Schlüssel Aus der if

-Beurteilungsaussage und den kombinierten Bedingungen können wir ersehen, dass, wenn die Beziehung leer oder undefiniert ist, dies bedeutet, dass sich die Maus zum Fenster bewegt hat und dann durch das Fenster gegangen sein muss Element zu diesem Zeitpunkt. Warum ist es so sicher? Was wir wissen müssen, ist, dass die zugrunde liegende Beurteilungsanweisung im Mouseover-Ereignis verarbeitet wird. Wenn es sich um ein Fenster handelt, muss es „durchgegangen“ sein " das Element. .

Dann schauen Sie sich die zweite Bedingung an, related!==target && !jQuery.contains(target,related). Wir können sehen, dass target=this; dann auf das Element zeigt und auf welches Element das Element verschoben wird. Wir wissen, dass der Unterschied zwischen Mouseover und MouseEnter darin besteht, ob es beim Verschieben von einem untergeordneten Element zu einem entsprechenden Element ausgelöst wird . Diese Situation kann mithilfe von related!==target && jQuery.contains(target, related) herausgefiltert werden.

Aus der Erklärung im vorherigen Absatz wissen wir, dass die Funktion dieser Bedingung darin besteht, zu bestimmen, ob sie von einem untergeordneten Element eines anderen Elements verschoben wird. Wenn ja, dann Ist das nicht der Fall, bedeutet dies, dass es sich von „außerhalb“ des Elements bewegt hat und das Ereignis ausgeführt werden muss ausgelöst.

Dies wird natürlich unter jQuery implementiert. Wenn Sie nativen JS-Code zur Implementierung verwenden möchten, können Sie ihn mit relatedTarget kombinieren. Natürlich können wir im IE eine Kombination aus fromElement und toElement verwenden, um dies zu erreichen.

Dies ist eine Aufzeichnung meines eigenen Lernprozesses. Ich hoffe, dass jeder auf die Mängel in den Kommentaren hinweisen kann.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der Mauseingabe in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!