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()
).
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 aPointerEvent
object.
Return value
This method returns undefined
.
Exceptions
Exception | Explanation |
---|---|
NotFoundError
|
Note: Firefox versions before Firefox 82 incorrectly throw |
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 2The definition of 'setPointerCapture' in that specification. | Recommendation | Non-stable version. |
Pointer EventsThe definition of 'setPointerCapture' in that specification. | Obsolete | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setPointerCapture
|
Chrome
Full support 55 |
Edge
Full support 12 |
Firefox Full support 59 Full support 59 Notes' Before Firefox 82, Disabled' From version 41: this feature is behind the |
IE Full support 11 Full support 11 Full support 10 Prefixed' Implemented with the vendor prefix: ms |
Opera
Full support 42 |
Safari
Full support 13 |
WebView Android
Full support 55 |
Chrome Android
Full support 55 |
Firefox Android Full support 79 Full support 79 Notes' Before Firefox 82, Disabled' From version 41: this feature is behind the |
Opera Android
Full support 42 |
Safari iOS
Full support 13 |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
- 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
Element.setPointerCapture() by Mozilla Contributors is licensed under CC-BY-SA 2.5.