JavaScript Element mouseleave Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word MOUSELEAVE

Definition

In JavaScript, the mouseleave event fires when a pointing device moves out of an element and all of its descendants (MDN). Paired with mouseenter, it acts much like leaving CSS :hover. The event type is a MouseEvent.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for mouseleave. Start with this line.

JavaScript
element.addEventListener("mouseleave", (event) => { … })
CallWhat it does
element.addEventListener("mouseleave", (event) => { … })Primary signature.

Built into the browser. Listen with el.addEventListener("mouseleave", …) — no import required.

Library declarations
JavaScript
element.addEventListener("mouseleave", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "mouseleave"
Handler propOptional. onmouseleave

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Leave Log (MDN-style)

Count how many times the pointer fully leaves the element.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
let count = 0;

box.addEventListener("mouseleave", () => {
  count += 1;
  out.textContent = "mouseleave #" + count;
});
Try It Yourself

How It Works

  1. Listen on the box. Attach mouseleave to the target element.
  2. Enter and move among children. Count stays the same.
  3. Fully exit. Count increases when you leave the element and descendants.
  4. Re-enter and leave again. Count increases again.

Example 2 — mouseleave vs mouseout

See why out fires more often when moving into a child.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
let leave = 0;
let outCount = 0;

box.addEventListener("mouseleave", () => {
  leave += 1;
  out.textContent = "leave=" + leave + " out=" + outCount;
});

box.addEventListener("mouseout", () => {
  outCount += 1;
  out.textContent = "leave=" + leave + " out=" + outCount;
});
Try It Yourself

How It Works

  1. Enter the parent. Neither leave counter ticks yet.
  2. Move into a child. mouseout increases; mouseleave does not.
  3. Exit the parent fully. Both may increase (leave finally fires).
  4. Takeaway. Prefer mouseleave for “left this box” cleanup.

Example 3 — Pair With mouseenter

Toggle hover state like CSS :hover.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("mouseenter", () => {
  out.textContent = "hovered";
});

box.addEventListener("mouseleave", () => {
  out.textContent = "idle";
});
Try It Yourself

How It Works

  1. Enter. Set UI to hovered.
  2. Stay inside children. State stays hovered (no leave yet).
  3. Leave. mouseleave resets to idle.
  4. Use case. Hide tooltips, close hover menus, clear highlights.
Compatibility

Browser Support

Element mouseleave is Baseline Widely available (MDN: since July 2015). Safe for hover cleanup UI in modern and older evergreen browsers.

✓ Baseline · Widely available

Element mouseleave

MouseEvent when the pointer leaves an element — long-established across browsers.

99% Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
mouseleave Baseline

Bottom line: Use mouseenter + mouseleave for simple hover on one element. Prefer mouseout only when you need bubbling among descendants.

Frequently Asked Questions

It fires when a pointing device moves out of an element and all of its descendants (MDN). Combined with mouseenter, it behaves a lot like leaving CSS :hover for that element.
No. MDN marks Element mouseleave as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent. Useful fields include clientX, clientY, relatedTarget, and modifier keys.
mouseleave does not bubble and fires only when the pointer has left the element and all descendants. mouseout bubbles and also fires when moving from the element into a descendant.
It follows the element’s position in the DOM tree. Moving into a visually nested sibling can still fire mouseleave on the outer element (MDN).
No. MDN notes that mouseleave and mouseout are not triggered when the element is replaced or removed from the DOM.

Next: mousemove

Learn the high-frequency event for pointer movement tracking.

mousemove tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element mouseenter Event JavaScript Element mousemove Event