Mouse over child elements trigger Mouseout,mouseover event solution _javascript Tips

I want to achieve the goal: when the mouse into the black box, the orange box to perform fade, when the black box range moved (even after the pink box, the animation is still not triggered), when the mouse moved out, the Orange square disappears.

The problem is explained: When the mouse moves into the black box, the orange box to perform fade, but when the mouse from the black box through the pink box, the orange box disappears, and then perform a fade in the animation. When the mouse moves from the pink box to the black box, the orange box fades into the animation and is executed. It's not what I want.

Initial code:

<! DOCTYPE html>
 
 

First, let's explain why these problems arise.

When the mouse moves from the black box to the pink box, the mouseout of the black box is triggered and the event bubbles, and the mouseover event of the black box is triggered, so in fact, the orange box disappears first, then the fade animation is performed immediately. This is the process we see.

When the mouse moves from the pink box to the black box, the mouseout of the black box is triggered (because regardless of whether the mouse crosses the selected element or its child element, triggers the MouseOver event), and MouseOver is triggered, so there is the process of performing the fade effect again.

Method One: Use Mouseleave/mouseout to replace Mouseover/mouseout "best Method"

First look at the difference between Mouseout&mouseover and mouseleave&mouseenter usage.

MouseOver and MouseEnter

The MouseOver event is triggered regardless of whether the mouse pointer crosses the selected element or its child elements.
The MouseEnter event is triggered only when the mouse pointer enters the selected element (inside the element) from outside the element.

Mouseout and MouseLeave

The Mouseout event is triggered regardless of whether the mouse pointer leaves the selected element or any child elements.
The MouseLeave event is triggered only when the mouse pointer is over the selected element (outside the element) from within the element.

You can look at a simple example and see the difference.

So the improved code can be thought

<! DOCTYPE html>
 
 

Method Two: Use E.stoppropagation () to prevent the event from spreading further

The

E.stoppropagation () terminates the event's further propagation during the capture, target processing, or bubbling phase of the propagation process. When this method is invoked, the handler for the event on the node is invoked and the event is no longer assigned to another node.

<!
 DOCTYPE html>  

Expand your thinking:

1. What if the child element is too much to do, does each have to bind e.stoppropagation ()?

A selector for jquery. Children (), such as $ ('. Parent '). Children (). Gets the child elements of each element in the matching element collection.

The above mentioned is the entire content of this article, I hope you can enjoy.