Element.setPointerCapture()

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

When pointer capture is set, 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

JavaScript

Copy Code

targetElement.setPointerCapture(pointerId);

Arguments

pointerId: The identifier for a pointer 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

JavaScript

Copy Code

<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.	Editor's Draft	Non-stable version.
Pointer Events The definition of 'setPointerCapture' in that specification.	Recommendation	Initial definition.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	Not supported	(Yes) ^[1]	10	Not supported	Not supported

Feature	Android	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS	IE Mobile	Opera Mobile	Safari Mobile
Basic support	Not supported	Not supported	Not supported	Not supported	Not supported	10	Not supported	Not supported

[1] Implementation withdrawn. See bug 1166347.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/element/setpointercapture

API DOM Element Method PointerEvent Reference