DEV Community: Parth Gupta

Mouse Events: onMouseOut and onMouseLeave in React

Parth Gupta — Fri, 24 Feb 2023 13:07:40 +0000

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



 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(() =&gt; {
  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>

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



);

}

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!

3 things to take care while making multi-level dropdown Menus

Parth Gupta — Wed, 15 Feb 2023 22:23:38 +0000

There are various types of menus on the web. For example, Standard Horizontal Menu, Hamburger Menu, Sticky or Fixed Menu etc. Creating inclusive experiences is a question of using the right menu pattern in the right place, with the right markup and behaviour.

Here are 3 things to take care while implementing these types of menus:

Focus and hover interactions
Mobile and desktop devices compatibility.
ARIA semantics intended to help screen reader users.

Focus and Hover Interactions

When it comes to implementing hover interactions with vertical Menubar and then showing up the submenus, it can cause chaos if not handled properly, so better to keep in mind the following things:

One must use the event-handlers onMouseEnter and onMouseLeave for hover interactions in 'menu-item'.
We also want our 'menu-item' to be accessible by pressing the TAB key on the keyboard. To do that, we can use tab-index ARIA. We need to specify the unique tabindex value to each 'menu-item'.

Note: Don't use the onMouseOut handler in place of onMouseLeave handler. onMouseOut handler triggers when the mouse pointer moves just out of the inner element. onMouseLeave handler triggers when the mouse pointer moves out of the inner element and its descendant child element also.

...
<ul role="menu-bar">
  {MENU.map((item, index) => (
    <li
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      role="menu-item"
      tabindex={index}
    >
      {item}
    </li>
  ))}
</ul>
...

When showing the dropdown-menu on hover, make sure that when a user moves the mouse pointer from the hovered 'menu-item' element to the dropdown menu, there should be no gap between it, otherwise, our hovered element should be out of focus which invokes onMouseLeave event, making the dropdown menu disappear before selecting anything.

Touch and desktop devices compatibility

Navigation submenus or dropdown work well with a mouse and keyboard but they’re not so hot when it comes to touch. As a touchscreen user, we can't hover on it, we have to press or click on that menu-item.
There are two possible resolutions here:

We can make a separate vertical Hamburger Menubar for mobile devices that opens the menu and submenus in vertical order.
We can make the top-level menu-item hoverable on desktop devices and clickable on mobile devices.

ARIA Semantics

Like semantic HTML, ARIA is a W3 standard that helps make interfaces more accessible to people who use screen readers and other assistive technologies to consume content.
So, let's look into the following steps on how we can apply the ARIA semantics in our menu-bar:

Assign role='menu-bar' to 'ul' so that screen readers can identify it as a menubar.
Assign role='menu-item' to each of its 'li' item also.
Also give a unique tabindex value to each 'li' item to make it accessible with keyboards.

And that's it, these are the least things that we need to think while implementing the multi-level dropdown Menubar or Navbar.

Happy coding for you