Element.setPointerCapture()

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: When pointer capture is set, pointerover, pointerout, pointerenter, and pointerleave events are only generated when crossing the boundary of the capture target. This has the effect of suppressing these events on all other elements.

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

targetElement.setPointerCapture(pointerId);

Parameters

pointerId

The pointerId of a PointerEvent object.

Return value

This method returns undefined.

Exceptions

NotFoundError DOMException

Thrown if pointerId does not match any active pointer.

Example

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

HTML

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

CSS

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

JavaScript

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
59
Before Firefox 82, setPointerCapture() throws InvalidPointerId for an invalid pointerId argument. From Firefox 82, it throws the specified NotFoundError exception. See bug 1662124.
41
11
10
42
13
55
55
79
Before Firefox 82, setPointerCapture() throws InvalidPointerId for an invalid pointerId argument. From Firefox 82, it throws the specified NotFoundError exception. See bug 1662124.
41
42
13
6.0

See also

© 2005–2021 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