Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Element : évènement pointermove

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 pointermove se déclenche lorsqu'un dispositif de pointage change de coordonnées, et que le pointeur n'a pas été annulé par une action tactile du navigateur. L'évènement se déclenche également lorsqu'un pointeur change l'une de ses autres propriétés, à condition que ce changement ne produise pas un autre évènement de pointeur. Cela inclut tout changement de pression, de pression tangentielle, d'inclinaison, de rotation, de géométrie du contact (largeur et hauteur), ou de boutons accordés (angl.).

L'évènement pointermove peut avoir des évènements fusionnés s'il existe déjà un autre évènement pointermove avec le même ID de pointeur qui n'a pas encore été distribué dans la boucle d'évènements. Si les évènements sont fusionnés, la cible (target) de l'évènement distribué est la même que celle du dernier évènement fusionné. Pour des informations sur les évènements fusionnés, voir la documentation de PointerEvent.getCoalescedEvents().

Cet évènement est très similaire à l'évènement mousemove, mais avec plus de fonctionnalités. Ces évènements se produisent que des boutons de pointeur soient pressés ou non. Ils peuvent se déclencher à un rythme très élevé, en fonction de la rapidité avec laquelle l'utilisateur·ice déplace le pointeur, de la rapidité de la machine, des autres tâches et processus en cours, etc.

La différence entre pointerrawupdate et pointermove réside dans leur fréquence de déclenchement. Un navigateur peut retarder les évènements pointermove pour améliorer les performances, tandis que les évènements pointerrawupdate sont distribués aussi rapidement et aussi fréquemment que le navigateur peut les produire. Dans la plupart des cas, vous devez préférer pointermove pour éviter des problèmes de performance.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènements.

js
addEventListener("pointermove", (event) => { })

onpointermove = (event) => { }

Type d'évènement

Un objet PointerEvent. Hérite de Event.

Event UIEvent MouseEvent PointerEvent

Notes d'utilisation

L'évènement, qui est de type PointerEvent, fournit toutes les informations nécessaires sur l'interaction de l'utilisateur·ice avec le dispositif de pointage, y compris la position, la distance de déplacement, l'état des boutons, et bien plus encore.

Exemples

Pour ajouter un gestionnaire pour les évènements pointermove en utilisant addEventListener() :

js
const para = document.querySelector("p");

para.addEventListener("pointermove", (event) => {
  console.log("Le pointeur a bougé");
});

Utilisation de la propriété de gestionnaire d'évènements onpointermove :

js
const para = document.querySelector("p");

para.onpointermove = (event) => {
  console.log("Le pointeur a bougé");
};

Spécifications

Spécification
Pointer Events
# pointermove
Pointer Events
# dom-globaleventhandlers-onpointermove

Compatibilité des navigateurs

Voir aussi