Element: setPointerCapture() method
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()
or the
pointerup
event is fired).
Note: Pointer capture will cause the target to capture all subsequent pointer events as if they were occurring over the capturing target. Accordingly, pointerover
, pointerenter
, pointerleave
, and pointerout
will not fire as long as this capture is set.
For touchscreen browsers that allow direct manipulation, an implicit pointer capture will be called on the element when a pointerdown
event triggers. The capture can be released manually by calling element.releasePointerCapture
on the target element, or it will be implicitly released after a pointerup
or pointercancel
event.
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
js
setPointerCapture(pointerId)
Parameters
pointerId
-
The
pointerId
of aPointerEvent
object.
Return value
None (undefined
).
Exceptions
NotFoundError
DOMException
-
Thrown if
pointerId
does not match any active pointer.
Examples
This example sets pointer capture on a <div>
when you press down on
it. This lets you slide the element horizontally, even when your pointer moves outside of
its boundaries.
HTML
html
<div id="slider">SLIDE ME</div>
CSS
css
div {
width: 140px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #fbe;
}
JavaScript
js
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 |
---|
Pointer Events # dom-element-setpointercapture |
Browser compatibility
BCD tables only load in the browser