W3cubDocs

/Web APIs

Element: setPointerCapture() method

The setPointerCapture() method of the Element interface is used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released (via Element.releasePointerCapture() or the pointerup event is fired).

Note: Pointer capture will cause the target to capture all subsequent pointer events as if they were occurring over the capturing target. Accordingly, pointerover, pointerenter, pointerleave, and pointerout will not fire as long as this capture is set. For touchscreen browsers that allow direct manipulation, an implicit pointer capture will be called on the element when a pointerdown event triggers. The capture can be released manually by calling element.releasePointerCapture on the target element, or it will be implicitly released after a pointerup or pointercancel event.

Overview of pointer capture

Pointer capture allows events for a particular pointer event (PointerEvent) to be re-targeted to a particular element instead of the normal (or hit test) target at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (such as by scrolling or panning).

Syntax

js

setPointerCapture(pointerId)

Parameters

pointerId

The pointerId of a PointerEvent object.

Return value

None (undefined).

Exceptions

NotFoundError DOMException

Thrown if pointerId does not match any active pointer.

Examples

This example sets pointer capture on a <div> when you press down on it. This lets you slide the element horizontally, even when your pointer moves outside of its boundaries.

HTML

html

<div id="slider">SLIDE ME</div>

CSS

css

div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}

JavaScript

js

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

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

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

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

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
setPointerCapture 55 12
59Before Firefox 82, setPointerCapture() throws InvalidPointerId for an invalid pointerId argument. From Firefox 82, it throws the specified NotFoundError exception. See bug 1662124.
1110 42 13 55 55
79Before Firefox 82, setPointerCapture() throws InvalidPointerId for an invalid pointerId argument. From Firefox 82, it throws the specified NotFoundError exception. See bug 1662124.
42 13 6.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture