JavaScript Element pointerout Event

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

Definition

In JavaScript, the pointerout event fires when a pointer leaves an element’s hit-test area (and in a few related cases such as non-hover pointerup or after pointercancel) (MDN). It is a bubbling PointerEvent — similar to mouseout.

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

Syntax

Listen for pointerout. Start with this line.

JavaScript
el.addEventListener("pointerout", fn)
CallWhat it does
el.addEventListener("pointerout", fn)Primary signature.

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

Library declarations
JavaScript
el.addEventListener("pointerout", fn)

Parameters

ParameterDescription
Event targetRequired. Element listening for leave
PointerEventRequired. Type, coords, relatedTarget

Return Value

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

JavaScript Examples

Example 1 — Listen for pointerout

MDN-style listener — log when the pointer leaves the element.

JavaScript
const para = document.querySelector("p");

para.addEventListener("pointerout", (event) => {
  console.log("Pointer moved out");
});
Try It Yourself

How It Works

  1. Select the target. Any Element can listen for pointerout.
  2. Add the listener. Use addEventListener or onpointerout.
  3. Leave the element. Mouse, touch (non-hover lift), or pen can trigger it.
  4. Expect child noise. Moving into a child can also fire pointerout.

Example 3 — Prefer pointerleave for Whole-Box Exit

Clear hover once when leaving the element and all of its children.

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

// Usually better than pointerout for whole-component exit (MDN)
box.addEventListener("pointerleave", () => {
  out.textContent = "left the whole box";
});
Try It Yourself

How It Works

  1. Choose pointerleave. MDN recommends it over pointerout for sensible whole-element exit.
  2. Ignore child crossings. Moving parent → child does not fire leave.
  3. No bubbling. Leave fires on the element itself when the pointer fully exits.
  4. Keep pointerout when you need bubbling or per-child leave signals.
Compatibility

Browser Support

Element pointerout is Baseline Widely available on MDN (since July 2020). Pointer Events work across modern evergreen browsers.

✓ Baseline · Widely available

Element pointerout

PointerEvent when a pointer leaves an element — bubbles; watch child crossings.

96% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
pointerout Excellent

Bottom line: Safe for modern web apps. For whole-component hover exit, prefer pointerleave. Use pointerout when you need bubbling or per-child leave signals.

Frequently Asked Questions

It fires when a pointer leaves an element’s hit-test area, when pointerup fires on devices without hover, after pointercancel, or when a pen leaves digitizer hover range (MDN). It also fires when moving across child boundaries.
No. MDN marks Element pointerout as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent. Useful fields include pointerId, pointerType, relatedTarget, clientX, and clientY.
pointerout bubbles and also fires when moving from a parent into a child (or among child boundaries). pointerleave does not bubble and fires only when leaving the element and all descendants.
For whole-component hover exit without descendant noise, MDN notes pointerenter / pointerleave are usually more sensible than pointerover / pointerout.
When you want bubbling/delegation, or when you care about leaving individual children (for example highlighting each list item as the pointer exits it).

Next: pointerover

Learn the bubbling enter twin of pointerout.

pointerover 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 pointermove Event JavaScript Element pointerover Event