Element: setPointerCapture() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2020.
Die setPointerCapture() Methode des
Element Interfaces wird verwendet, um ein bestimmtes Element als Capture-Ziel zukünftiger Zeigerereignisse zu designieren. Nachfolgende Ereignisse für den Zeiger werden an das Capture-Element gerichtet, bis das Capture freigegeben wird (via
Element.releasePointerCapture() oder wenn das pointerup Ereignis ausgelöst wird).
Für einen Überblick und Beispiele, wie Pointer Capture funktioniert, siehe Pointer Events.
Syntax
setPointerCapture(pointerId)
Parameter
pointerId-
Die
pointerIdeinesPointerEventObjekts.
Rückgabewert
Keiner (undefined).
Ausnahmen
NotFoundErrorDOMException-
Ausgelöst, wenn
pointerIdkeinem aktiven Zeiger entspricht.
Beispiele
In diesem Beispiel wird ein Pointer Capture auf einem <div> gesetzt, wenn Sie darauf drücken. Dies ermöglicht es Ihnen, das Element horizontal zu verschieben, selbst wenn Ihr Zeiger außerhalb seiner Grenzen bewegt wird.
HTML
<div id="slider">SLIDE ME</div>
CSS
div {
width: 140px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #ffbbee;
touch-action: none;
}
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;
Ergebnis
Spezifikationen
| Specification |
|---|
| Pointer Events # dom-element-setpointercapture |
Browser-Kompatibilität
Loading…