Element : méthode setPointerCapture()
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.
La méthode setPointerCapture() de l'interface Element est utilisée pour désigner un élément spécifique comme cible de capture des futurs évènements de pointeur. Les évènements ultérieurs pour le pointeur sont ciblés sur l'élément de capture jusqu'à ce que la capture soit libérée (avec Element.releasePointerCapture() ou l'évènement pointerup).
Voir les évènements de pointeur pour un aperçu et des exemples de fonctionnement de la capture de pointeur.
Syntaxe
setPointerCapture(pointerId)
Paramètres
pointerId-
Un
pointerIdd'un objetPointerEvent.
Valeur de retour
Aucune (undefined).
Exceptions
NotFoundErrorDOMException-
Levée si
pointerIdne correspond à aucun pointeur actif.
Exemples
Cet exemple définit la capture du pointeur sur un <div> lorsque vous appuyez dessus. Cela vous permet de faire defiler l'élément horizontalement, même lorsque votre pointeur se déplace en dehors de ses limites.
HTML
<div id="glissiere">GLISSEZ-MOI</div>
CSS
div {
width: 140px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #ffbbee;
touch-action: none;
}
JavaScript
const glissiere = document.getElementById("glissiere");
function demarrerGlissement(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 = demarrerGlissement;
glissiere.onpointerup = arreterGlissement;
Résultat
Spécifications
| Spécification |
|---|
| Pointer Events # dom-element-setpointercapture |
Compatibilité des navigateurs
Voir aussi
- La méthode
Element.hasPointerCapture() - La méthode
Element.releasePointerCapture() - Les évènements de pointeur