JavaScript Element releasePointerCapture() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word RELEASEPOINTERCAPTURE

Definition

Element.releasePointerCapture() stops pointer capture that was set with setPointerCapture() for a given pointerId (MDN). After release, later pointer events follow normal hit-testing again. Returns undefined.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.releasePointerCapture. Start with this line.

JavaScript
element.releasePointerCapture(pointerId)
CallWhat it does
element.releasePointerCapture(pointerId)Primary signature.
el.releasePointerCapture(...)Call with the arguments your case needs.

Built into the browser. Call releasePointerCapture(...) on an Element — no import required.

Library declarations
JavaScript
element.releasePointerCapture(pointerId)

Parameters

ParameterDescription
pointerIdRequired. Active pointer id from a PointerEvent

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Release on pointerup

Capture on down; release on up and log the result.

JavaScript
const el = document.getElementById("pad");

el.addEventListener("pointerdown", (e) => {
  el.setPointerCapture(e.pointerId);
  console.log("capturing", e.pointerId);
});

el.addEventListener("pointerup", (e) => {
  el.releasePointerCapture(e.pointerId);
  console.log("released", e.pointerId);
});
Try It Yourself

How It Works

  1. Press the element. pointerdown gives a live pointerId.
  2. Call setPointerCapture. Moves keep targeting el.
  3. Release the pointer. pointerup fires.
  4. Call releasePointerCapture. Capture stops for that id (MDN).

Example 2 — MDN Slider Pattern

Attach move on down; clear move and release on up.

JavaScript
const slider = document.getElementById("slider");

function beginSliding(e) {
  slider.onpointermove = (ev) => {
    console.log("x:", ev.clientX);
  };
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;
Try It Yourself

How It Works

  1. On down: set a move handler, then capture the pointer.
  2. On move: read coordinates while capture is active.
  3. On up: clear the handler and call releasePointerCapture.
  4. Why both? Clearing the handler stops work; release ends capture cleanly (MDN).

Example 3 — Guard Against NotFoundError

Only release a live pointerId from an active event.

JavaScript
const el = document.getElementById("pad");

el.addEventListener("pointerdown", (e) => {
  el.setPointerCapture(e.pointerId);
});

el.addEventListener("pointerup", (e) => {
  try {
    el.releasePointerCapture(e.pointerId); // OK — active pointer
  } catch (err) {
    console.log(err.name); // NotFoundError if id was stale
  }
});

// Bad: fake id with no active pointer
// el.releasePointerCapture(999); → NotFoundError
Try It Yourself

How It Works

  1. Use the event’s id. e.pointerId matches an active pointer.
  2. Stale / fake ids throw. MDN: NotFoundError.
  3. Wrap in try/catch if you reuse stored ids or release twice.
  4. Best practice: release inside the pointer handler with that event’s id.
Compatibility

Browser Support

Element.releasePointerCapture() is Baseline Widely available on MDN (across browsers since July 2020). Safe to use in modern drag and pointer UIs.

✓ Baseline Widely available

Element.releasePointerCapture()

Stop pointer capture for drag/slider controls — widely supported.

Wide Baseline
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
releasePointerCapture() Widely available

Bottom line: Call releasePointerCapture(e.pointerId) on pointerup after setPointerCapture. Prefer over deprecated releaseCapture().

Frequently Asked Questions

It releases (stops) pointer capture that was previously set for a specific pointer identified by pointerId (MDN).
No. MDN marks Element.releasePointerCapture() as Baseline Widely available (across browsers since July 2020). It is not Deprecated, Experimental, or Non-standard.
undefined. There is no return value (MDN).
The pointerId from a PointerEvent — typically event.pointerId from pointerdown, pointermove, or pointerup (MDN).
On pointerup, pointercancel, or when you cancel a drag early — after you previously called setPointerCapture(pointerId). Capture also ends automatically on pointerup (MDN).
NotFoundError DOMException if pointerId does not match any active pointer (MDN).

Next: Element.remove()

Learn how to remove an element from the DOM tree.

remove() 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)

18 people found this page helpful

JavaScript Element setPointerCapture() Method JavaScript Element remove() Method