JavaScript Element gotpointercapture Event

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

Definition

In JavaScript, gotpointercapture fires when an element captures a pointer using setPointerCapture() (MDN). 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 gotpointercapture. Start with this line.

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

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

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

Parameters

ParameterDescription
Event nameRequired. "gotpointercapture"
Handler propOptional. ongotpointercapture
TriggerRequired. setPointerCapture(pointerId)

Return Value

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

JavaScript Examples

Example 1 — MDN Capture Log

Call setPointerCapture on pointerdown; log when capture succeeds.

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

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

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

How It Works

  1. Listen first. Attach gotpointercapture before capturing.
  2. On press. pointerdown provides an active pointerId.
  3. Capture. setPointerCapture(pointerId) retargets later events.
  4. Confirm. The success signal is gotpointercapture.

Example 2 — ongotpointercapture Property

Same MDN idea using the event handler property.

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

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

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

How It Works

  1. Assign the property. ongotpointercapture 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 — Pair With lostpointercapture

Track capture begin/end for drag UI state.

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

stage.addEventListener("gotpointercapture", (event) => {
  console.log("got", event.pointerId);
});

stage.addEventListener("lostpointercapture", (event) => {
  console.log("lost", event.pointerId);
});

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

How It Works

  1. Listen to both. Begin and end keep UI state honest.
  2. Use pointerId. Match the same pointer across events.
  3. Release paths. Lift, cancel, or releasePointerCapture can end capture.
  4. Drag safety. This is why sliders keep updating outside their box.
Compatibility

Browser Support

Element gotpointercapture is Baseline Widely available (MDN: since July 2020). Safe to use with Pointer Events in modern evergreen browsers.

✓ Baseline · Widely available

Element gotpointercapture

PointerEvent when setPointerCapture succeeds — established across browsers.

99% 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
gotpointercapture Baseline

Bottom line: Safe for production drag/capture UI. Pair with setPointerCapture, releasePointerCapture, and lostpointercapture.

Frequently Asked Questions

It fires when an element captures a pointer using setPointerCapture() (MDN). After that, subsequent events for that pointer are retargeted to the capturing element until capture is released.
No. MDN marks Element gotpointercapture as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent. Useful fields include pointerId, pointerType, and isPrimary.
Call element.setPointerCapture(event.pointerId) — usually inside a pointerdown handler. When capture succeeds, gotpointercapture fires (MDN).
lostpointercapture fires when capture ends — for example via releasePointerCapture(), pointerup, or pointercancel.
So a drag, slider, or drawing surface keeps receiving pointermove events even if the pointer leaves the element’s bounds.

Next: input

Learn the Element event for value changes.

input 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 gesturestart Event JavaScript Element input Event