Événements de pointeur

À compter de Windows 8, Internet Explorer prend en charge la spécification Événements de pointeur (Pointer Events) du W3C pour la gestion des entrées de l’utilisateur. Les événements de pointeur sont fondés sur les événements de souris traditionnels, à la différence près qu’ils appliquent le concept de pointeur à toutes les modalités d’entrée de l’utilisateur, y compris la souris, l’interaction tactile et le stylet. Vous pouvez utiliser des événements de pointeur pour créer une expérience utilisateur harmonieuse entre les différentes méthodes d’entrée utilisateur en écrivant un seul ensemble d’événements de pointeur qui fonctionnent sur diverses configurations matérielles.

Événements de pointeur et objet PointerEvent

L’objet PointerEvent hérite de MouseEvent et est distribué lors d’interactions utilisateur similaires.

Événement de sourisÉvénement de pointeur correspondant
mousedown pointerdown
mouseenter pointerenter
mouseleave pointerleave
mousemove pointermove
mouseout pointerout
mouseover pointerover
mouseup pointerup

 

L’objet PointerEvent fournit toutes les propriétés données habituellement par les événements de souris (comme les coordonnées clientX/clientY, l’élément target et les propriétés button/buttons), ainsi que des propriétés supplémentaires pour vous aider à distinguer les types et caractéristiques d’entrée  :

Propriété PointerEventDescription

height

Hauteur (ampleur sur l’axe Y), en pixels CSS, de la géométrie de contact du pointeur.

isPrimary

Retourne une valeur indiquant si le pointeur associé à l’événement est le pointeur principal pour l’interaction actuelle (souris, entrée tactile ou stylet).

pointerId

Identificateur unique du contact pour une entrée tactile, à la souris ou au stylet.

pointerType

Retourne une valeur indiquant si la source de l’événement est une entrée tactile, au stylet ou à la souris.

pressure

Retourne la pression normalisée de l’entrée par pointeur dans la plage [0,1], où 0 et 1 représentent respectivement la pression minimale et la pression maximale que le matériel est en mesure de détecter.

tiltX

Retourne l’angle entre le plan Y-Z et le plan contenant l’axe du stylet et l’axe Y dans la plage -90 à 90. Inclinaison X positive : vers la droite.

tiltY

Retourne l’angle entre le plan X-Z et le plan X du transducteur. Inclinaison Y positive : vers l’utilisateur.

width

Retourne la largeur (ampleur sur l’axe X), en pixels CSS, de la géométrie de contact du pointeur.

 

Compatibilité de souris

Après avoir déclenché des événements de pointeur, IE déclenche des événements de souris pour le contact principal (par exemple, la première pression du doigt sur l’écran). Cela permet aux sites Web existants basés sur des événements de souris de continuer à fonctionner correctement.

Contrairement à une souris, il est possible d’avoir plusieurs pointeurs à l’écran à la fois (par exemple, à l’aide d’un périphérique d’entrée tactile multipoint). Dans ces scénarios, un événement de pointeur séparé se déclenche pour chaque point de contact, ce qui facilite la création de sites et d’applications permettant l’entrée multipoint.

Détection de fonctionnalité et test de la prise en charge des entrées tactiles

Utilisez l’interface PointerEvent pour tester la prise en charge des événements de pointeur :


if (window.PointerEvent) {
  // Pointer events are supported.
}

Notez que la détection de fonctionnalité des événements de pointeur n’indique pas si l’appareil prend en charge l’entrée tactile ou l’entrée à l’aide d’un stylet. La propriété PointerEvent vérifie uniquement si la plate-forme déclenchera des événements de pointeur pour le matériel présent dans le système.

Pour tester les fonctionnalités tactiles et la prise en charge de l’interaction tactile multipoint, utilisez la propriété maxTouchPoints :


// Test for touch capable hardware 
if(navigator.maxTouchPoints) { ... }

// Test for multi-touch capable hardware
if(navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { ... }

// Check the maximum number of touch points the hardware supports
var touchPoints = navigator.maxTouchPoints;

Contrôle de la gestion des entrées tactiles par défaut

À compter de Windows 8, IE assure par défaut la gestion des interactions tactiles courantes, notamment les panoramiques pour les régions avec défilement, le zoom par pincement et la prise en charge du glisser-déplacer HTML5 tactile qui est activé par une séquence d’interactions utilisateur (appui, appui prolongé et glissement). Vous pouvez utiliser la propriété CSS touch-action pour spécifier si une région de page donnée peut être ou non manipulée par une entrée tactile, la façon dont elle peut être manipulée, ainsi que les comportements de gestion des entrées tactiles par défaut.

La règle de style suivante désactive toutes gestion des entrées tactiles par défaut et dirige tous les événements de pointeur vers le code JavaScript :


touch-action: none;

Pour plus d’informations, voir Contrôle de l’expérience tactile par défaut.

Capture d’événements de pointeur sur un élément

Dans certains cas, il est utile d’affecter un pointeur spécifique à un élément pour s’assurer que l’élément continue à recevoir des évènements de pointeur même si le contact quitte l’élément.

Par exemple, si l’utilisateur effectue un appui prolongé sur un bouton de l’interface utilisateur de votre application Web et que l’utilisateur fait glisser son doigt hors du bouton sans le soulever (rupture de contact), le bouton peut ne pas recevoir l’événement pointerup. Dans ce cas, l’état « appui » peut être affecté indéfiniment au bouton. En affectant le pointeur à l’élément bouton, le bouton reçoit les événements de pointeur, y compris l’événement pointerup qui indique au bouton de revenir à son état initial.

Vous pouvez appeler la méthode setPointerCapture d’un objet d’élément pour affecter une propriété pointerId spécifique à cet élément :


window.addEventListener('pointerdown', pointerdownHandler, false);

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

Lorsqu’un pointeur est capturé par un élément, l’élément parent et l’élément ancêtre reçoivent un événement gotpointercapture lors de la phase de capture et de propagation.

La capture est libérée lorsque le pointeur est supprimé (pointerup) ou explicitement libérée lorsque la méthode releasePointerCapture est appelée. Il existe aussi des cas dans lesquels l’élément peut perdre la capture. Par exemple, si l’entrée tactile quitte la fenêtre ou qu’un autre élément capture l’entrée tactile, l’élément ayant la capture la perd. L’élément qui perd la capture reçoit un événementlostpointercapture.

Annulation de pointeurs

Lors d’une entrée tactile avec le doigt ou un stylet, il est parfois nécessaire de supprimer des pointeurs à l’écran. Par exemple, si votre écran ne prend en charge que deux points d’entrée tactile simultanés et que vous ajoutez un troisième point d’entrée tactile à l’écran, l’un des deux autres points sera annulé, car le matériel ne peut pas prendre en charge trois points d’entrée. L’annulation d’un pointeur est indiquée par l’événement pointercancel. Cela vous donne la possibilité de gérer les tâches de nettoyage nécessaires. Par exemple, si votre application gère une liste de pointeurs, vous pouvez écouter l’événement pointercancel pour savoir à quel moment supprimer un pointeur donné de cette liste.

Remarques pour la compatibilité

Pour être conforme avec la Candidate Recommendation de la spécification Événements de pointeur (Pointer Events) du W3C, l’implémentation des événements de pointeur dans Internet Explorer 11 a légèrement changé par rapport à celle d’Internet Explorer 10. Pour obtenir des informations complètes, voir Mises à jour des événements de pointeurdans le Guide de référence sur la compatibilité de Windows Internet Explorer.

Le polyfill JavaScript HandJS fournit une bibliothèque que vous pouvez utiliser pour écrire dans le modèle d’événements de pointeur sur les navigateurs qui ne prennent pas encore en charge la spécification Pointer Events du W3C. Pour obtenir une démonstration, voir Création d’une manette de jeu tactile virtuelle universelle avec Hand.JS.

Informations de référence sur les API

PointerEvent

Exemples et didacticiels

Préparer votre site aux interactions tactiles
Exemples de pointeurs et de mouvements

Démonstrations du site Internet Explorer Test Drive

Mandelbrot Explorer
Browser Surface
Touch Effects
Brick Breaker

Billets IEBlog

Le W3C fait passer les événements de pointeur au stade de « Candidate Recommendation » (recommandation candidate)
En savoir plus sur les événements de pointeur quand le W3C publie le dernier appel de stade d’ébauche
Groupe de travail du W3C sur les événements de pointeur
Vers des événements de pointeur interopérables : évolution des événements d’entrée pour plusieurs appareils
Recommandations en matière de génération de sites tactiles
Gestion des entrées tactiles multipoint et des entrées de souris dans tous les navigateurs
Entrées tactiles pour Internet Explorer 10 et les applications du Windows Store

Spécification

Spécification d’événements de pointeur

Rubriques connexes

Création d’une manette de jeu tactile virtuelle universelle pour tous les modèles tactiles grâce à Hand.JS
Événements de mouvement
Hand.js : polyfill de prise en charge des événements de pointeur sur tous les navigateurs
Défilement et zoom tactiles
Unification des entrées tactiles et de la souris : les événements de pointeur facilitent la prise en charge des entrées tactiles entre navigateurs

 

 

Afficher:
© 2014 Microsoft