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 July 2020.

Die setPointerCapture()-Methode des Element-Interfaces wird verwendet, um ein bestimmtes Element als das Erfassungsziel für zukünftige Zeigerereignisse zu bestimmen. Nachfolgende Ereignisse für den Zeiger werden auf das Erfassungs-Element gerichtet, bis die Erfassung aufgehoben wird (über Element.releasePointerCapture() oder das pointerup-Ereignis ausgelöst wird).

Siehe Zeigerereignisse für einen Überblick und Beispiele, wie die Zeigererfassung funktioniert.

Syntax

setPointerCapture(pointerId)

Parameter

pointerId: Die pointerId eines PointerEvent-Objekts.

Rückgabewert

Keiner (undefined).

Ausnahmen

NotFoundError DOMException: Wird ausgelöst, wenn pointerId keinem aktiven Zeiger entspricht.

Beispiele

Dieses Beispiel setzt die Zeigererfassung auf einem <div>, wenn Sie darauf drücken. Dadurch können Sie das Element horizontal verschieben, selbst wenn Ihr Zeiger sich außerhalb seiner Grenzen bewegt.

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;
  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