JavaScript Element mouseout Event

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

Definition

In JavaScript, the mouseout event fires when a pointing device moves so the cursor is no longer contained within the element or one of its children (MDN). It also fires when the cursor enters a child that covers the parent. 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 mouseout. Start with this line.

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

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

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

Parameters

ParameterDescription
Event nameRequired. "mouseout"
Handler propOptional. onmouseout

Return Value

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

JavaScript Examples

Example 1 — Out Log

Count how often mouseout fires on a parent with a child.

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

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

How It Works

  1. Listen on the parent. Bubbling delivers child-boundary outs too.
  2. Move into a child. Count often increases even though you are still “inside” the parent box.
  3. Leave fully. Count increases again.
  4. Takeaway. Expect more events than mouseleave.

Example 2 — mouseout vs mouseleave

Compare counts while moving into a child (MDN contrast).

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

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

box.addEventListener("mouseleave", () => {
  leave += 1;
  out.textContent = "out=" + outCount + " leave=" + leave;
});
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 fully. mouseleave finally increases.
  4. Prefer leave for “left this component” UI cleanup.

Example 3 — Child Exit (MDN-style)

React when the pointer leaves an individual list item.

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

list.addEventListener("mouseout", (event) => {
  const item = event.target.closest("li");
  if (!item || !list.contains(item)) return;
  out.textContent = "left: " + item.textContent;
});
Try It Yourself

How It Works

  1. Delegate on the list. One listener covers all items.
  2. Find the item. closest("li") maps the target to a row.
  3. Ignore non-items. Guard when the event is not from an li.
  4. Use case. Per-item exit feedback (MDN list demo idea).
Compatibility

Browser Support

Element mouseout is Baseline Widely available (MDN: since July 2015). Safe for bubbling leave/delegation patterns in modern and older evergreen browsers.

✓ Baseline · Widely available

Element mouseout

MouseEvent when the pointer leaves an element or enters a child — 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
mouseout Baseline

Bottom line: Use mouseout for bubbling/child-aware leaves. Prefer mouseleave for whole-component hover exit without descendant noise.

Frequently Asked Questions

It fires when a pointing device moves so the cursor is no longer contained within the element or one of its children (MDN). It also fires when the cursor enters a child that covers the parent.
No. MDN marks Element mouseout as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent. Useful fields include relatedTarget, clientX, clientY, and target.
mouseout bubbles and also fires when moving from a parent into a child (or among child boundaries). mouseleave does not bubble and fires only when leaving the element and all descendants.
For whole-component hover exit without descendant noise, MDN notes mouseenter/mouseleave are usually more sensible than mouseover/mouseout.
When you want bubbling/delegation, or when you care about leaving individual children (for example reacting as the pointer exits each list item).

Next: mouseover

Learn the bubbling enter event that pairs with mouseout.

mouseover 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 mousemove Event JavaScript Element mouseover Event