JavaScript Element setPointerCapture() Method

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

Definition

Element.setPointerCapture() makes an element the capture target for future pointer events. Events for that pointer keep targeting the element until releasePointerCapture() or pointerup (MDN). Returns undefined.

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

Syntax

Call el.setPointerCapture. Start with this line.

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

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

Library declarations
JavaScript
element.setPointerCapture(pointerId)

Parameters

ParameterDescription
pointerIdRequired. Active pointer id from a PointerEvent

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Capture on pointerdown

Start capture when the user presses the control.

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

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

el.addEventListener("pointermove", (e) => {
  console.log("move while captured", e.clientX, e.clientY);
});
Try It Yourself

How It Works

  1. Press the element. pointerdown fires with a pointerId.
  2. Call setPointerCapture. That id is now captured by el.
  3. Move anywhere. pointermove still targets el (MDN).
  4. Release the pointer. Capture ends on pointerup.

Example 2 — Capture + Release (MDN Pattern)

Capture on down; clear the move handler and release on up.

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

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

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

slider.onpointerdown = begin;
slider.onpointerup = end;
Try It Yourself

How It Works

  1. On down: attach move handler, then capture the pointer.
  2. On move: read coordinates while capture is active.
  3. On up: remove the handler and call releasePointerCapture.
  4. Why release? Clean stop if you end early; pointerup also ends capture (MDN).

Example 3 — Guard Against NotFoundError

Only capture a live pointerId from an active event.

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

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

// Bad: fake id with no active pointer
// el.setPointerCapture(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 ever reuse stored ids.
  4. Best practice: call capture only inside the pointer handler.
Compatibility

Browser Support

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

✓ Baseline Widely available

Element.setPointerCapture()

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
setPointerCapture() Widely available

Bottom line: Call setPointerCapture(e.pointerId) on pointerdown. Pair with releasePointerCapture / hasPointerCapture. Prefer over deprecated setCapture().

Frequently Asked Questions

It designates an element as the capture target for future pointer events. Subsequent events for that pointer go to the capture element until releasePointerCapture() is called or pointerup fires (MDN).
No. MDN marks Element.setPointerCapture() 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 (MDN).
On pointerdown when starting a drag, slider, or custom control so pointermove and pointerup still reach your element if the pointer leaves its bounds (MDN).
NotFoundError DOMException if pointerId does not match any active pointer (MDN).

Next: releasePointerCapture()

Learn how to stop capturing a pointer before pointerup.

releasePointerCapture 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 hasPointerCapture() Method JavaScript Element releasePointerCapture() Method