Element : évènement pointercancel
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.
L'évènement pointercancel est déclenché lorsque le navigateur détermine qu'il est peu probable qu'il y ait d'autres évènements de pointeur, ou si après que pointerdown est déclenché, le pointeur est ensuite utilisé pour manipuler la vue en effectuant un panoramique, un zoom ou un défilement.
Voici quelques exemples de situations qui déclenchent un évènement pointercancel :
- Un évènement matériel se produit et annule les activités du pointeur. Cela peut inclure, par exemple, le fait que l'utilisateur·ice change d'application en utilisant une interface de commutation d'application ou le bouton « accueil » sur un appareil mobile.
- L'orientation de l'écran de l'appareil est modifiée alors que le pointeur est actif.
- Le navigateur décide que l'utilisateur·ice a commencé une saisie au pointeur par accident. Cela peut se produire si, par exemple, le matériel prend en charge le rejet de la paume pour empêcher qu'une main reposant sur l'écran tout en utilisant un stylet ne déclenche accidentellement des évènements.
- La propriété CSS
touch-actionempêche la saisie de continuer. - Lorsque l'utilisateur·ice interagit avec trop de pointeurs simultanés, le navigateur peut déclencher cet évènement pour tous les pointeurs existants (même si l'utilisateur·ice touche encore l'écran).
Note :
Après le déclenchement de l'évènement pointercancel, le navigateur envoie également pointerout suivi de pointerleave.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("pointercancel", (event) => { })
onpointercancel = (event) => { }
Type d'évènement
Un objet PointerEvent. Hérite de Event.
Exemples
Utilisation de addEventListener() :
const para = document.querySelector("p");
para.addEventListener("pointercancel", (event) => {
console.log("Annulation de l'évènement pointer");
});
Utilisation de la propriété de gestionnaire d'évènement onpointercancel :
const para = document.querySelector("p");
para.onpointercancel = (event) => {
console.log("Annulation de l'évènement pointer");
};
Spécifications
| Spécification |
|---|
| Pointer Events # the-pointercancel-event |
| Pointer Events # dom-globaleventhandlers-onpointercancel |