Element: releasePointerCapture() 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 releasePointerCapture()-Methode der Element-Schnittstelle gibt eine zuvor gesetzte Zeigererfassung für einen bestimmten (PointerEvent) Zeiger frei (stoppt sie).

Syntax

js
releasePointerCapture(pointerId)

Parameter

pointerId

Die pointerId eines PointerEvent-Objekts.

Rückgabewert

Keiner (undefined).

Ausnahmen

NotFoundError DOMException

Wird ausgelöst, wenn pointerId mit keinem aktiven Zeiger übereinstimmt.

Beispiele

Dieses Beispiel setzt die Zeigererfassung auf einem <div>, wenn man darauf drückt. Dies ermöglicht es Ihnen, das Element horizontal zu verschieben, selbst wenn sich Ihr Zeiger 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;
}

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;

Ergebnis

Spezifikationen

Specification
Pointer Events
# dom-element-releasepointercapture

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
releasePointerCapture

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch