MouseLeave vs Mouseout

Just like paneer and tofu, mouseleave and mouseout might look the same but they are quite different in how they behave. Especially mouseout , in my opinion, behaves quite weirdly and I would want to share you the difference so that you won’t end up wasting hours in choosing the right one.

As the name suggests, both of them are event listeners and have to do something with handling “cursor-leaving-the-element” event. But let’s dive deeper to understand what makes both of them different.

Note: You can apply the same reasoning for comparing mouseenter & mouseover

Photo by Tanner Johnson

The example we are going to work with:

The example code we are going to work on (code here)

MouseLeave

The mouseleave event is the one which you want to use, when all you want is to trigger an action when the cursor leaves the element of your interest.

If I move the cursor in the order:

ENTER parent div -> ENTER Child Div -> LEAVE Child Div -> LEAVE Parent Div

check the console log (code here)

The output is getting triggered in the order that is expected,

1. Cursor enters the parent div(green box)
2. Cursor enters the child div(red box)
3. Cursor moves from child div to the parent div

• mouseleave of child gets called

3. Cursor moves out of the parent div(to the white background)

• mouseleave of parent gets called.

The mouseleave action of an element only gets triggered, when a cursor is completely out of the element itself and all of its children.

Now, let’s consider a new arrangement of divs and the sequence of cursor movements:

ENTER Child div -> ENTER Parent Div -> ENTER Child Div -> LEAVE Child Div

(code here)

1. I entered the child div
2. Then I left the child div (to enter the parent div)

• mouseleave of child gets called

3. Then I left the parent div (to enter the child div)

• Nothing got called (Even though visually we were out of the parent box)
• According to our definition above, mouseleave only gets triggered when we are out of both the element itself and its children. In this case we were still inside one of its children. So mouseleave of parent didn’ get triggered.

3. Finally I left the child div(to the white background)

• The mouseleave of child div got called
• The mouseleave of parent div got called

Mouseout

If you change the first code from mouseleave to mouseout and perform the same action.

ENTER parent div -> ENTER Child Div -> LEAVE Child Div -> LEAVE Parent Div

This is how the output will look like,

changed the event to mouseout (code here)

1. I enter the parent div
2. Then I move from the parent div to the child div,

• mouseout of parent div gets called first (what??)

3. I leave the child div,

• mouseout of child div gets called
• Followed by, mouseout of parent div gets called (again what??)

4. Finally I leave the parent div.

• mouseout of parent div gets called.

You may wonder, why mouseout of parent is getting called when,

1. The cursor enters the child
2. The cursor leaves the child

If you understand the why of the above two points, you’ll find that you’ve achieved your goal in reading this article.

Reason #1: Child obscures the parent

According to MDN,

mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element.

What does it mean when a child element “obscures the visible area” of the parent element?

• From the DOM’s perspective, the children element are always inside the parent.
• But from a visual perspective, children elements are placed on top of the parent (consider the previous example, where the red box appears on top of the green box). This placement means that the child element overlays and visually covers part of the parent element.

This visual perception of the child obscuring the parent’s area is crucial to understand the first behaviour.

When the cursor moves from the parent to the child, the browser perceives this as the cursor leaving the parent element. Consequently, the browser triggers the mouseout event on the parent element, because visually, the cursor has left the parent’s area and is now over the child.

Reason #2: Mouseout Event bubbles🫧

Again quoting MDN,

mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does

To understand why the mouseout of parent gets called when the cursor leaves the child, its important to grasp the concept of event bubbling and realise that mouseout events bubble.

For Busy people: Event Bubbling is the mechanism where an event arising from a child element is propagated up the DOM tree until it reaches the top node (or until some ancestor stops the propagation)

When I say mouseout events bubble, I mean that whenever the mouseout event of a child is triggered, it also triggers the mouseout event of the parent. This is exactly why, when the cursor leaves the child, the mouseout event of it’s parent also gets called.

To see this behaviour in action, let’s stop the bubbling and observe the changes:

Output after stopping the event bubbling (code here)

Now, when the cursor leaves the child, only the mouseout event of the child is triggered. This proves our assumption that the events are bubbling up, as the parent mouseout event no longer gets called.

To summarize the article, the major differences between mouseleave and mouseout are:

• mouseleave triggers only when the cursor exits the element and all its children entirely, similar to leaving an entire building. In contrast, mouseout, even though behaves same as mouseleave, also interprets entering a child element as “leaving” the parent element.
• mouseleave events don’t bubble whereas mouseout do.

I hope you’ve enjoyed the article and now have a clear understanding of the differences between mouseleave and mouseout.

Please feel free to comment and share the article to help others grasp these concepts as well.