Compréhension approfondie de mouseenter dans jquery

Parlons-en plus tôt : parlons d'abord de la différence entre les deux. Supposons que l'élément actuel est un élément et que l'événement de survol a une caractéristique de bouillonnement, ce qui signifie que peu importe si la souris est utilisée. se déplace d'autres éléments vers un élément ou L'événement mouseover sera déclenché lors du passage de l'élément enfant d'un élément à l'autre. Pour l'événement mouseenter, cet événement n'a pas de fonction de bouillonnement, ce qui signifie que le mouseenter ne sera déclenché que lorsque la souris passera par l'événement. Si la souris a "erré" à l'intérieur de l'élément, le mouseenter ne sera pas déclenché. Pour des exemples spécifiques, veuillez vous référer à cet exemple et cliquez pour ouvrir le lien.

Maintenant que le principe est terminé, comment utiliser le survol de la souris pour implémenter mouseenter !

Voyons d'abord comment jQuery est implémenté. Voici le code pour implémenter mouseenter et mouseleave dans 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;
		}
	};
});

Ne regardez pas le. pour d'autres, la clé est À partir de l'instruction de jugement if et des conditions combinées, nous pouvons voir que si Related est vide ou indéfini, cela signifie que la souris s'est déplacée vers la fenêtre, alors elle doit être passée par le élément à ce moment. Pourquoi est-ce si sûr ? Ce que nous devons savoir, c'est que l'instruction de jugement sous-jacente est traitée dans l'événement mouseover. Related renvoie l'élément à partir duquel la souris s'est déplacée vers l'élément. S'il s'agit d'une fenêtre, alors elle doit être "passée par". " l'élément. .

Ensuite, regardez la deuxième condition, Related!==target && !jQuery.contains(target, Related). Nous pouvons voir que target=this; puis target pointe vers l'élément, et les points associés vers quel élément est déplacé vers l'élément. Nous savons que la différence entre le survol et la saisie de la souris est de savoir s'il est déclenché lors du passage d'un élément enfant à l'élément correspondant. . Cette situation peut être filtrée en utilisant Related!==target && jQuery.contains(target, Related).

Grâce à l'explication du paragraphe précédent, nous savons que la fonction de cette condition est de déterminer si elle est déplacée d'un élément enfant d'un élément si elle est déplacée d'un autre élément à un autre. n'est pas Déclencher l'événement. Si ce n'est pas le cas (!jQuery.contains(target, Related)), cela signifie qu'il a été déplacé de "l'extérieur" de l'élément. Cela signifie ensuite que la souris a traversé l'élément et que l'événement doit être déclenché. déclenché.

Bien sûr, ceci est implémenté sous jQuery. Si vous souhaitez utiliser du code js natif pour l'implémenter, vous pouvez le combiner avec RelatedTarget. Bien sûr, dans IE, nous pouvons utiliser une combinaison de fromElement et toElement pour y parvenir.

Ceci est un enregistrement de mon propre processus d'apprentissage. Ma compréhension est peut-être fausse. J'espère que tout le monde pourra souligner les lacunes dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!