JavaScript Element mouseleave Event

What You’ll Learn

The mouseleave event fires when a pointing device moves out of an element. Learn addEventListener vs onmouseleave, how it differs from mouseout, the mouseenter pair, CSS :hover-like cleanup, and five try-it labs.

Introduction

mouseleave answers: “Did the pointer just leave this element and all of its descendants?” Pair it with mouseenter and you get JS hover enter/exit signals similar to CSS :hover.

Unlike mouseout, mouseleave does not bubble and fires only after the pointer has left the element and all descendants. That makes it friendlier for card/hover UI where you want one clean exit, not a burst of out events while moving among children.

Understanding mouseleave

An instance event that answers: “Did the pointer just leave this element?”

• Fires when the pointer moves out of the element and all descendants.
• Does not bubble — stays on the element that was left.
• Descendants — moving among children does not fire leave on the parent.
• Pair — mouseenter when the pointer enters.
• Not fired when the element is removed/replaced in the DOM (MDN).
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("mouseleave", (event) => { });

onmouseleave = (event) => { };

Event type

A MouseEvent (inherits from UIEvent and Event).

Handy properties

⚖️ mouseleave vs mouseout

Examples Gallery

Examples follow MDN Element: mouseleave event. Move the pointer into and out of the stage elements.

let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");

mouseTarget.addEventListener("mouseenter", () => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem("This is mouseenter event " + enterEventCount + ".");
});

mouseTarget.addEventListener("mouseleave", () => {
  mouseTarget.style.border = "1px solid #333333";
  leaveEventCount++;
  addListItem("This is mouseleave event " + leaveEventCount + ".");
});

function addListItem(text) {
  const li = document.createElement("li");
  li.textContent = text;
  unorderedList.appendChild(li);
}

This is mouseleave event 1.

const card = document.getElementById("card");
const out = document.getElementById("out");

card.onmouseenter = () => {
  card.classList.add("is-hot");
  out.textContent = "entered";
};

card.onmouseleave = () => {
  card.classList.remove("is-hot");
  out.textContent = "left";
};

left

const parent = document.getElementById("parent");
const out = document.getElementById("out");
let leaveCount = 0;
let outCount = 0;

parent.addEventListener("mouseleave", () => {
  leaveCount++;
  render();
});

parent.addEventListener("mouseout", () => {
  outCount++;
  render();
});

function render() {
  out.textContent = "mouseleave=" + leaveCount + " mouseout=" + outCount;
}

mouseleave=1 mouseout=9

const card = document.getElementById("card");
const tip = document.getElementById("tip");

card.addEventListener("mouseenter", () => {
  tip.hidden = false;
  tip.textContent = "Preview details…";
});

card.addEventListener("mouseleave", () => {
  tip.hidden = true;
  tip.textContent = "";
});

(tip hidden)

const outer = document.getElementById("outer");
const out = document.getElementById("out");

outer.addEventListener("mouseleave", (event) => {
  out.textContent =
    "left outer (to " +
    ((event.relatedTarget && event.relatedTarget.id) || "outside") +
    ")";
});

outer.addEventListener("mouseenter", () => {
  out.textContent = "inside outer";
});

left outer (to outside)

🚀 Common Use Cases

• Hide tooltips / previews when the pointer leaves a card.
• Remove highlight classes that were added on mouseenter.
• Cancel hover-driven prefetch timers on exit.
• Close hover menus only after leaving the whole control.
• Teach the difference between bubbling mouseout and non-bubbling leave.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Does not bubble; use mouseout when you need delegation from a parent.
• Not fired when the element is removed or replaced in the DOM.
• For touch UIs, hover leave is not always available; design a non-hover path too.
• Related learning: mouseenter, mousedown, addEventListener(), JavaScript hub.

💡 Best Practices