JavaScript Element lostpointercapture Event

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

Definition

In JavaScript, lostpointercapture fires when a captured pointer is released (MDN). It is the end signal that pairs with gotpointercapture. The event type is a PointerEvent.

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

Syntax

Listen for lostpointercapture. Start with this line.

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

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

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

Parameters

ParameterDescription
Event nameRequired. "lostpointercapture"
Handler propOptional. onlostpointercapture

Return Value

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

JavaScript Examples

Example 1 — MDN Release Log

Capture on pointerdown; log when capture ends.

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

para.addEventListener("lostpointercapture", () => {
  console.log("I've been released!");
});

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});
Try It Yourself

How It Works

  1. Listen first. Attach lostpointercapture before capturing.
  2. On press. setPointerCapture(pointerId) starts the session.
  3. On release. Lift ends capture and fires this event.
  4. Confirm. The end signal is lostpointercapture.

Example 2 — onlostpointercapture Property

Same MDN idea using the event handler property.

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

para.onlostpointercapture = () => {
  console.log("I've been released!");
};

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});
Try It Yourself

How It Works

  1. Assign the property. onlostpointercapture is the handler shortcut.
  2. One handler only. A later assignment replaces the previous one.
  3. Same trigger. Still call setPointerCapture on pointerdown.
  4. Prefer addEventListener when you need multiple listeners.

Example 3 — Drag Cleanup

Reset UI state when capture ends — the usual drag pattern.

JavaScript
const stage = document.querySelector("#stage");
let dragging = false;

stage.addEventListener("pointerdown", (event) => {
  stage.setPointerCapture(event.pointerId);
});

stage.addEventListener("gotpointercapture", () => {
  dragging = true;
  console.log("drag start");
});

stage.addEventListener("lostpointercapture", () => {
  dragging = false;
  console.log("drag end — cleanup");
});
Try It Yourself

How It Works

  1. Capture on press. Keeps moves on the stage outside its box.
  2. Mark start on got. Enter dragging mode when capture succeeds.
  3. Clean up on lost. Always reset — even if the pointer left the element.
  4. Why it matters. Prevents stuck “dragging” UI after release/cancel.
Compatibility

Browser Support

Element lostpointercapture is Baseline Widely available (MDN: since July 2020). Safe for drag/slider capture cleanup in modern evergreen browsers.

✓ Baseline · Widely available

Element lostpointercapture

PointerEvent when a captured pointer is released — established across browsers.

95% 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
lostpointercapture Baseline

Bottom line: Pair with gotpointercapture. Clean up drag state here so UI never sticks after release or cancel.

Frequently Asked Questions

It fires when a captured pointer is released (MDN). Capture can end via releasePointerCapture(), pointerup, pointercancel, or other release paths. Use it to clean up drag UI and session state.
No. MDN marks Element lostpointercapture as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent. Handy fields include pointerId, pointerType, and isPrimary.
After pointer capture ends for that element — for example when you call releasePointerCapture(pointerId), or when the pointer is released (pointerup) while capture was active.
gotpointercapture fires when setPointerCapture() succeeds and capture begins. lostpointercapture is the matching end signal.
So you can reset cursors, remove dragging classes, stop tracking moves, and restore idle UI when the capture session ends — even if the pointer left the element.

Next: mousedown

Learn the classic mouse press event and how it relates to pointer events.

mousedown 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 keyup Event JavaScript Element mousedown Event