Pointer capture allows events for a particular pointer event (PointerEvent) to be re-targeted to a particular element instead of the normal target (or hit test) 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 (for example by scrolling).
setPointerCapture() is the method of the Element interface used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at capture element until capture is released (via Element.releasePointerCapture).
pointerover, pointerout pointerenter and pointerleave events are only generated when crossing the boundary of the element that has capture set since other elements can no longer be targeted by the pointer. This has the effect of suppressing these events on all other elements.Syntax
targetElement.setPointerCapture(pointerId);
Arguments
- pointerId
- The
identifierfor apointer event.
Return value
This method returns void and throws a DOMException with the name InvalidPointerId if pointerId does not match any of the active pointers.
Example
<html>
<script>
function downHandler(ev) {
var el=document.getElementById("target");
//Element 'target' will receive/capture further events
el.setPointerCapture(ev.pointerId);
}
function init() {
var el=document.getElementById("target");
el.onpointerdown = downHandler;
}
</script>
<body onload="init();">
<div id="target"> Touch me ... </div>
</body>
</html>
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
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Chrome Full support 55 | Edge ? | Firefox
Full support
59
| IE
Full support
11
| Opera Full support 42 | Safari No support No | WebView Android Full support 55 | Chrome Android Full support 55 | Edge Mobile ? | Firefox Android
No support
No
| Opera Android Full support 42 | Safari iOS No support No | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- 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.