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()).

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

Exception Explanation
InvalidPointerId pointerId does not match any of the active pointers.

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

Specification Status Comment
Pointer Events – Level 2
The definition of 'setPointerCapture' in that specification.
Working Draft Non-stable version.
Pointer Events
The definition of 'setPointerCapture' in that specification.
Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
setPointerCaptureChrome Full support 55Edge Full support 12Firefox Full support 59
Full support 59
Full support 41
Disabled
Disabled From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: ms
Opera Full support 42Safari No support NoWebView Android Full support 55Chrome Android Full support 55Firefox Android No support No
No support No
Full support 41
Disabled
Disabled From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 42Safari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Document Tags and Contributors

Last updated by: Wind1808,