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.targetElement.setPointerCapture(pointerId);
identifier
for a pointer event
.This method returns void
and throws a DOMException
with the name InvalidPointerId
if pointerId
does not match any of the active pointers.
<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>
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. |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | No support | (Yes) | (Yes) [1] | 10 | No support | No support |
Feature | Android | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | No support | (Yes) | No support | No support | 10 | No support | No support |
[1] Implementation withdrawn. See bug 1166347.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/element/setPointerCapture