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()
).
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 aPointerEvent
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. |
Recommendation | Non-stable version. |
Pointer Events The definition of 'setPointerCapture' in that specification. |
Obsolete | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setPointerCapture | Chrome Full support 55 | Edge Full support 12 | Firefox
Full support
59
| IE
Full support
11
| Opera Full support 42 | Safari Full support 13 | WebView Android Full support 55 | Chrome Android Full support 55 | Firefox Android
No support
No
| Opera Android Full support 42 | Safari iOS Full support 13 | Samsung Internet Android Full support 6.0 |
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.