JavaScript Element lostpointercapture Event

What You’ll Learn

The lostpointercapture event fires when a captured pointer is released. Learn addEventListener vs onlostpointercapture, pointerId, the gotpointercapture pair, releasePointerCapture(), drag cleanup patterns, and five try-it labs.

Introduction

Pointer capture lets an element keep receiving events for a specific pointer even when the pointer leaves that element’s hit area—perfect for sliders, drag handles, and canvas drawing.

When capture ends, the browser fires lostpointercapture on the element that had captured the pointer. That is your cue to leave “dragging” mode: clear classes, reset cursors, and stop treating moves as part of the session.

Understanding lostpointercapture

An instance event that answers: “Did this element just lose pointer capture?”

• Fires when a previously captured pointer is released.
• PointerEvent — includes pointerId, pointerType, and more.
• Handler — onlostpointercapture or addEventListener("lostpointercapture", ...).
• Pair — gotpointercapture when capture begins.
• Related APIs — setPointerCapture, releasePointerCapture, hasPointerCapture.
• Baseline Widely available on MDN (since July 2020).

📝 Syntax

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

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

onlostpointercapture = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties

🔁 Capture Lifecycle

A typical drag / slider flow looks like this:

1. pointerdown on the element (pointer is active)
2. setPointerCapture(pointerId) on the element
3. gotpointercapture fires on the capturing element
4. pointermove events keep targeting the capturer (even outside bounds)
5. pointerup / releasePointerCapture() → lostpointercapture

So gotpointercapture is the “capture started” confirmation; lostpointercapture is the matching end signal—use it for cleanup.

⚖️ Capture APIs at a glance

Examples Gallery

Examples follow MDN Element: lostpointercapture event. Press and hold on the stage, then release to see capture end.

const para = document.querySelector("p");
const out = document.getElementById("out");

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

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

I've been released!

const para = document.querySelector("p");
const out = document.getElementById("out");

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

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

I've been released!

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

stage.addEventListener("lostpointercapture", (event) => {
  out.textContent =
    "released id=" + event.pointerId +
    " type=" + event.pointerType;
});

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

released id=1 type=mouse

const stage = document.getElementById("stage");
const endBtn = document.getElementById("end");
const out = document.getElementById("out");
let activeId = null;

stage.addEventListener("lostpointercapture", (event) => {
  out.textContent = "LOST capture id=" + event.pointerId;
  activeId = null;
  stage.classList.remove("is-captured");
});

stage.addEventListener("pointerdown", (event) => {
  activeId = event.pointerId;
  stage.setPointerCapture(event.pointerId);
  stage.classList.add("is-captured");
  out.textContent = "captured id=" + event.pointerId;
});

endBtn.addEventListener("click", () => {
  if (activeId != null && stage.hasPointerCapture(activeId)) {
    stage.releasePointerCapture(activeId);
  }
});

LOST capture id=1

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

stage.addEventListener("gotpointercapture", (event) => {
  out.textContent = "GOT capture id=" + event.pointerId;
  stage.classList.add("is-captured");
});

stage.addEventListener("lostpointercapture", (event) => {
  out.textContent = "LOST capture id=" + event.pointerId;
  stage.classList.remove("is-captured");
});

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

stage.addEventListener("pointerup", (event) => {
  if (stage.hasPointerCapture(event.pointerId)) {
    stage.releasePointerCapture(event.pointerId);
  }
});

GOT capture id=1
LOST capture id=1

🚀 Common Use Cases

• Leave “dragging” mode (remove classes, restore cursor).
• Finalize slider / scrubber values when the pointer lifts.
• Stop canvas drawing strokes when capture ends.
• Cancel or commit a custom resize / pan gesture.
• Debug capture sessions with pointerId release logs.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available — no Deprecated / Experimental / Non-standard banner.
• Capture needs an earlier successful setPointerCapture for lostpointercapture to be meaningful.
• Also listen for pointercancel paths; capture can end without a clean pointerup.
• Use touch-action: none on drag surfaces to reduce browser gesture interference.
• Related learning: gotpointercapture, pointercancel, releasePointerCapture(), addEventListener(), JavaScript hub.

💡 Best Practices