Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Element.setPointerCapture()
Baseline
Widely available
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 Pointer capture (capture de pointeur) permet de re-cibler des événements pour un événement de pointeur particulier (PointerEvent) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).
setPointerCapture() est la méthode de l'interface Element utilisée pour désigner un élément spécifique comme cible de capture deévènements de pointeur futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via Element.releasePointerCapture).
Note :
Lorque la capture du pointeur est définie, les évènements pointerover, pointerout pointerenter et pointerleave sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.
Syntaxe
.setPointerCapture(pointerId);
targetElement
Arguments
- pointerId
-
L'
identifiantpour unévènement de pointeur.
Valeur de retour
Cette méthode renvoie void et lance une DOMException nommée InvalidPointerId si pointerId ne correspond à aucun des pointeurs actifs.
Exemple
<html>
<script>
function downHandler(ev) {
var el = document.getElementById("target");
//L'élément cible ('target') recevra/capturera d'autres évènements
el.setPointerCapture(ev.pointerId);
}
function init() {
var el = document.getElementById("target");
el.onpointerdown = downHandler;
}
</script>
<body onload="init();">
<div id="target">Touch me ...</div>
</body>
</html>
Spécifications
| Specification |
|---|
| Pointer Events # dom-element-setpointercapture |
Compatibilité des navigateurs
Chargement...