Mouse Events: onMouseOut and onMouseLeave in React

JavaScript events enable us to interact with the webpage in a dynamic manner. There are wide variety of interaction events such as clicking a button, hovering over a dropdown, pressing a key on the keyboard etc.

Mouse Events are the events that occur when the mouse interacts with the HTML document. Here, we will distinguish between 2 mouse events that are used when a mouse hovers over an HTML element or React component.

1. onMouseOut Event:

This event will trigger when a mouse cursor is no longer within the element or one of its children. It will also trigger when the cursor enters any of the child element, because the child element hides the visible area of the parent.

Behaviour of onMouseOut Event

A single onMouseOut event is applied on the deepest nested div in the above image. Now, when it triggers, it starts from that div and start bubbling up the hierarchy until it is canceled by a handler or reaches the root.

2. onMouseLeave Event:

The onMouseLeave event is fired when the mouse cursor of a pointing device is moved out of the HTML or React element.

Behaviour of onMouseLeave Event

In this image, One onMouseLeave event is applied to each of the div element. Now, when the pointer moves from the text to an area outside of the most outer div represented here, four events are triggered with respect to each of the four div elements in the hierarchy.

Difference b/w onMouseOut and OnMouseLeave

The following example illustrates the difference between onMouseOut and onMouseLeave events. In this example video, when we move the cursor to one of the child <li> elements and after that exit from parent <ul>:

• The onMouseLeave event fires only 1 time, giving <ul> an orange bg-color for 1s.

• The onMouseOut event fire 3 times. First, when we enter the child element because it hides the visible area of underlying ul item. Second, when we exit from the child <li> element and the third time when we exit from the parent <ul> element.

Javascript

// src/App.js
import React from "react";
import "./styles.css";

export default function App() {
  const bullets = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  const handleMouseEvent = (e) => {
    e.persist();
    e.target.style.backgroundColor = "orange";

    setTimeout(() => {
      e.target.style.backgroundColor = "";
    }, 1000);
  };


  return (
    <div className="App">
      <h3>onMouseOut Event:</h3>
      <ul className="menu" onMouseOut={handleMouseEvent}>
        {bullets.map((item) => (
          <li className="menu-item">{item}</li>
        ))}
      </ul>

      <h3>onMouseLeave Event:</h3>
      <ul className="menu" onMouseLeave={handleMouseEvent}>
        {bullets.map((item) => (
          <li className="menu-item">{item}</li>
        ))}
      </ul>
    </div>
  );
}

Takeaway

It's very easy to get confused between these two handlers when applying it on hovering a dropdown menu or any other element. I hope this article has helped you understand these handlers clearly. Additionally, when using other event handlers, we need to have a clear understanding of them before applying in our project.

Happy Coding!

Comments

[Deepank Sharma]

Very well explained, thanks for the insights.

[Parth Gupta]

Thank you!