Element : méthode releasePointerCapture()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.

En savoir plus
Voir la compatibilité complète

La méthode releasePointerCapture() de l'interface Element relâche (arrête) la capture de pointeur qui avait été précédemment définie pour un pointer spécifique (PointerEvent).

Syntaxe

releasePointerCapture(pointerId)

Paramètres

pointerId: Le pointerId d'un objet PointerEvent.

Exceptions

NotFoundError DOMException: Levée si pointerId ne correspond à aucun pointeur actif.

Cet exemple définit la capture de pointeur sur un <div> lorsque vous appuyez dessus. Cela vous permet de faire glisser l'élément horizontalement, même lorsque votre pointeur se déplace en dehors de ses limites.

HTML

html

<div id="glissiere">Glissez-moi</div>

CSS

css

div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffbbee;
}

JavaScript

const glissiere = document.getElementById("glissiere");

function debuterGlissement(e) {
  glissiere.onpointermove = defiler;
  glissiere.setPointerCapture(e.pointerId);
}

function arreterGlissement(e) {
  glissiere.onpointermove = null;
  glissiere.releasePointerCapture(e.pointerId);
}

function defiler(e) {
  glissiere.style.transform = `translate(${e.clientX - 70}px)`;
}

glissiere.onpointerdown = debuterGlissement;
glissiere.onpointerup = arreterGlissement;