JavaScript Element hasPointerCapture() Method

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

Definition

In JavaScript, the hasPointerCapture() method returns a boolean — whether this element currently has pointer capture for a given pointerId (MDN).

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

Syntax

Call el.hasPointerCapture. Start with this line.

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

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

Library declarations
JavaScript
el.hasPointerCapture(pointerId)

Parameters

ParameterDescription
pointerIdRequired. number. From PointerEvent.pointerId (MDN)

Return Value

Return ValueDescription
*true if this element has capture for that id

JavaScript Examples

Example 1 — Set + Check

MDN-style: capture on pointerdown, then call hasPointerCapture.

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

el.addEventListener("pointerdown", (ev) => {
  el.setPointerCapture(ev.pointerId);
  const pointerCap = el.hasPointerCapture(ev.pointerId);
  console.log(pointerCap ? "capture active" : "capture lost");
});
Try It Yourself

How It Works

  1. Listen for pointerdown. You need an active pointerId.
  2. Set capture. setPointerCapture(ev.pointerId) (MDN).
  3. Ask hasPointerCapture. Same id → usually true right after set.
  4. Branch on the boolean. Confirm capture before tracking moves.

Example 2 — Before vs After Set

Capture is false until you call setPointerCapture.

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

el.addEventListener("pointerdown", (ev) => {
  console.log(el.hasPointerCapture(ev.pointerId)); // false
  el.setPointerCapture(ev.pointerId);
  console.log(el.hasPointerCapture(ev.pointerId)); // true
});
Try It Yourself

How It Works

  1. Check before set. No capture yet → false.
  2. Call setPointerCapture. Element requests ownership of that pointer.
  3. Check again. Same pointerId → true.
  4. Id must match. A different number checks a different pointer.

Example 3 — Release Clears Capture

After releasePointerCapture, hasPointerCapture returns false.

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

el.addEventListener("pointerdown", (ev) => {
  el.setPointerCapture(ev.pointerId);
  console.log(el.hasPointerCapture(ev.pointerId)); // true
  el.releasePointerCapture(ev.pointerId);
  console.log(el.hasPointerCapture(ev.pointerId)); // false
});
Try It Yourself

How It Works

  1. Set capture. Element owns the pointer → true.
  2. Release explicitly. releasePointerCapture(pointerId).
  3. Check again. Capture gone → false.
  4. Events: also listen for lostpointercapture when capture ends.
Compatibility

Browser Support

Element.hasPointerCapture() is Baseline Widely available (MDN: across browsers since July 2020). Safe for modern teaching and production code.

✓ Baseline · Widely available

hasPointerCapture()

Return true or false depending on whether this element has capture for a pointerId.

Wide Baseline
Google Chrome Full support
Supported
Mozilla Firefox Full support
Supported
Apple Safari Full support
Supported
Microsoft Edge Full support
Supported
Opera Full support
Supported
Internet Explorer Not available
Unavailable
hasPointerCapture() Widely available

Bottom line: Use hasPointerCapture in drag/gesture code to confirm your element still owns the pointer.

Frequently Asked Questions

It returns a boolean indicating whether the element has pointer capture for the pointer identified by the given pointer ID (MDN).
No. MDN marks Element.hasPointerCapture() as Baseline Widely available (across browsers since July 2020). It is not Deprecated, Experimental, or Non-standard.
The pointerId from a PointerEvent object (for example event.pointerId from pointerdown, pointermove, or pointerup).
When the element currently holds pointer capture for that pointerId — typically after setPointerCapture(pointerId) and before releasePointerCapture(pointerId) or the pointer ends.
setPointerCapture() requests capture for a pointer. hasPointerCapture() only checks whether capture is already active on this element.
Useful in drag handlers: confirm your element still owns the pointer before handling further pointermove or pointerup events (MDN).

Next: insertAdjacentElement()

Learn how to insert an element at a relative position next to another element.

insertAdjacentElement 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 hasAttributes() Method JavaScript Element insertAdjacentElement() Method