PointerEvent

L'interface PointerEvent représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc.

Un pointeur est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran.

Le test de ciblage d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran.

Constructeurs

PointerEvent()
Crée un PointerEvent synthétique et anonyme.

Propriétés

Cette interface hérite des proprétés de MouseEvent et Event.

PointerEvent.pointerId Lecture seule
Un identifiant unique pour le pointeur ayant provoqué l'événément.
PointerEvent.width Lecture seule
La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.
PointerEvent.height Lecture seule
La hauteur (magniture sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.
PointerEvent.pressure Lecture seule
La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
PointerEvent.tangentialPressure Lecture seule
La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
PointerEvent.tiltX Lecture seule
Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y.
PointerEvent.tiltY Lecture seule
Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X.
PointerEvent.twist Lecture seule
La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359.
PointerEvent.pointerType Lecture seule
Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.)
PointerEvent.isPrimary Lecture seule
Indique si le pointeur est le principal appareil de ce type.

Methods

PointerEvent.getCoalescedEvents()
Retourne une séquence de toutes les instances de PointerEvent qui ont été dirigées vers l'événément pointermove envoyé.

Types d'événéments de pointeur

L'interface PointerEvent a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété type de l'événément.

Note: Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter event.preventDefault() afin d'empêcher l'événément de la souris d'être également envoyée.
pointerover
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément.
pointerenter
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément ou l'un de ses descendants, ce qui inclut un événément de pointage vers le bas d'un appareil qui ne propose pas de fonctionnalité de survol (voir pointage vers le bas). Ce type d'événément est similaire à un pointage par dessus, mais se différencie en ne faisant pas circuler l'événément.
pointerdown
L'événément est déclenché lorsqu'un pointeur devient actif. Pour une souris, il est déclenché lorsque l'appareil passe d'aucun bouton pressé à au moins un bouton pressé. Pour un touché, il est déclenché lorsqu'un contact physique est effectué avec le numériseur. Pour un stylet, il est déclenché au contact de ce dernier avec le numériseur.
pointermove
Cet événément est déclenché lorsqu'un pointeur change de coordonnées.
pointerup
Cet événement est déclenché lorsqu'un pointeur n'est plus actif.
pointercancel
Un navigateur déclenche cet événément s'il conclut que le pointeur ne sera plus capable de générer des événéments (par exemple, l'appareil concerné a été désactivé).
pointerout
Cet événément est déclenché pour plusieurs raisons qui incluent : l'appareil de pointage est déplacé en dehors de la zone du test de ciblage d'un élément; déclencher l'événément de pointage vers le haut pour un appareil qui ne supporte pas le survol (voir pointage vers le haut); après avoir déclenché un événément de pointage annulé (voir pointage annulé); lorsqu'un stylet quitte la zone de portée pour être détectée au survol par le numériseur.
pointerleave
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur.
gotpointercapture
Cet événément est déclenché lorsqu'un élément est capturé par un pointeur.
lostpointercapture
Cet événément est déclenché après qu'un pointeur ait relâché sa capture.

GlobalEventHandlers

GlobalEventHandlers.onpointerover
Un global event handler pour l'événement pointerover.
GlobalEventHandlers.onpointerenter
Un global event handler pour l'événement pointerenter.
GlobalEventHandlers.onpointerdown
Un global event handler pour l'événement pointerdown.
GlobalEventHandlers.onpointermove
Un global event handler pour l'événement pointermove.
GlobalEventHandlers.onpointerup
Un global event handler pour l'événement pointerup.
GlobalEventHandlers.onpointercancel
Un global event handler pour l'événement pointercancel.
GlobalEventHandlers.onpointerout
Un global event handler pour l'événement pointerout.
GlobalEventHandlers.onpointerleave
Un global event handler pour l'événement pointerleave.

Exemple

Un exemple de chaque propriété, type d'événément, et un gestionnaire d'événéments global sont inclus dans leur page respective de référence.

Spécifications

Specification Status Comment
Pointer Events – Level 2
La définition de 'PointerEvent' dans cette spécification.
Version de travail Version non-stable.
Pointer Events
La définition de 'PointerEvent' dans cette spécification.
Recommendation Définition initiale.

Compatibilité navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
PointerEventChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support partiel 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : MS
Notes See MSDN Pointer events updates.
Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
PointerEvent() constructorChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support partiel 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : MS
Notes See MSDN Pointer events updates.
Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
getCoalescedEvents
Expérimentale
Chrome Support complet 58Edge Aucun support NonFirefox Support complet 59IE Aucun support NonOpera Support complet 45Safari Aucun support NonWebView Android Support complet 58Chrome Android Support complet 58Firefox Android Support partiel 59
Désactivée
Support partiel 59
Désactivée
Désactivée From version 59: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 7.0
heightChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support partiel 10
Notes
Notes Returns values in screen pixels instead of CSS document pixels.
Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
isPrimaryChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
pointerIdChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
pointerTypeChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support partiel 10
Notes
Notes Returns an integer enumeration instead of a string.
Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
pressureChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support partiel 10
Notes
Notes Returns 0 instead of 0.5 on hardware that doesn't support pressure.
Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
tangentialPressureChrome Support complet 58Edge Aucun support NonFirefox Support complet 59
Support complet 59
Support complet 54
Désactivée
Désactivée From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 45Safari Support complet 13WebView Android Support complet 58Chrome Android Support complet 58Firefox Android Support complet 54
Désactivée
Support complet 54
Désactivée
Désactivée From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43Safari iOS Support complet 13Samsung Internet Android Support complet 7.0
tiltXChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
tiltYChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0
twistChrome Support complet 58Edge Support complet 18Firefox Support complet 59
Support complet 59
Support complet 54
Désactivée
Désactivée From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 45Safari Support complet 13WebView Android Support complet 58Chrome Android Support complet 58Firefox Android Support complet 54
Désactivée
Support complet 54
Désactivée
Désactivée From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43Safari iOS Support complet 13Samsung Internet Android Support complet 7.0
widthChrome Support complet 55Edge Support complet 12Firefox Support complet 59
Support complet 59
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support partiel 10
Notes
Notes Returns values in screen pixels instead of CSS document pixels.
Opera Support complet 42Safari Support complet 13WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 41
Désactivée
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 42Safari iOS Support complet 13Samsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

See also