In-depth understanding of mouseenter in jquery

Let’s talk about it before: First let’s talk about the difference between the two. Assume that the current element is element, mouseover event has the bubbling characteristic, that is to say, whether the mouse moves from other elements to element or The mouseover event will be triggered when moving from the child element of element to element. For the mouseenter event, this event does not have a bubbling feature, which means that the mouseenter will only be triggered when the mouse passes through the event. If the mouse has been "wandering" inside the element, the mouseenter will not be triggered. For specific examples, please refer to this example and click to open the link.

The premise is over, then how to use mouseover to implement mouseenter!

Let’s first take a look at how jQuery is implemented. The following is the code to implement mouseenter and 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;
		}
	};
});

You don’t need to look at the others, the key is if Judgment statement and the combined conditions therein, we can see that if related is empty or undefined, it means that the mouse has moved to the window, then it must have passed through the element at this time. Why is it so sure? What we need to know is that the underlying judgment statement is processed in the mouseover event. Related returns the element from which the mouse moved to the element. If it is a window, then it must have "passed through" the element. .

Then look at the second condition, related!==target && !jQuery.contains(target,related). We can see that target=this; then target points to element, and related points to which element is moved to element. We know that the difference between mouseover and mouseenter is whether it is triggered when moving from a child element to element. corresponding events. This situation can be filtered out using related!==target && jQuery.contains(target, related).

Through the explanation in the previous paragraph, we know that the function of this condition is to determine whether it is moved from a child element of element if it is moved from another element to element. If so, then it will not Trigger the event. If not (!jQuery.contains(target,related)), it means it is moved from "outside" the element. Then it means that the mouse has passed through the element, and the event needs to be triggered.

Of course, this is implemented under jQuery. If you want to use native js code to implement it, you can combine it with relatedTarget. Of course, in IE we may use a combination of fromElement and toElement to achieve this.

This is a record of my own learning process. My understanding may be wrong. I hope everyone can point out the shortcomings in the comments.

The above is the detailed content of In-depth understanding of mouseenter in jquery. For more information, please follow other related articles on the PHP Chinese website!