Événements de pointeur et de mouvement
Internet Explorer 10 et les applications du Windows Store en JavaScript pour Windows 8 introduisent la prise en charge des entrées tactiles et de la saisie effectuée à l’aide du stylet sur les plateformes Web. Internet Explorer 10 présente le concept de pointeur, qui vous évite de devoir créer du code pour gérer chaque type d’entrée séparément.
Un pointeur correspond à tout point de contact à l’écran : il peut s’agir d’un clic de la souris ou d’une pression avec le doigt ou un stylet. Vous pouvez désormais proposer facilement une expérience cohérente entre le matériel d’entrée et les facteurs de forme en écrivant un seul ensemble d’événements de pointeur qui encapsulent les entrées à l’aide de la souris ou tactiles avec le doigt ou un stylet.
Événements de pointeur
De même que les événements de souris, les événements de pointeur se déclenchent pour chaque pointeur (down, move, up, over et out (bas, déplacement, haut, sur et sortie)) :
Contrairement à une souris, il est possible d’avoir plusieurs pointeurs à l’écran à la fois (à l’aide, par exemple, 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.
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 MSPointerCancel.
Compatibilité de souris
Après avoir déclenché des événements de pointeur, Internet Explorer 10 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 à continuer à fonctionner.
Détection de fonctionnalités
Voici la meilleure manière de procéder pour détecter la prise en charge d’événements de pointeur :
if (window.navigator.msPointerEnabled) { // Pointer events are supported. }
Notez que cette détection de fonctionnalités n’indique pas que l’appareil prend en charge l’entrée tactile avec le doigt ou à l’aide d’un stylet. Elle indique en fait que la plate-forme déclenchera des événements de pointeur pour le matériel présent dans le système.
L’exemple suivant est une application de peinture au doigt de base qui a recours aux événements de pointeur pour l’utilisation de la souris et de l’entrée tactile avec le doigt ou un stylet.
<!DOCTYPE html> <html> <head> <title>Scribble touch example</title> <style> html { -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */ } </style> <script> window.addEventListener('load', function () { var canvas = document.getElementById("drawSurface"), context = canvas.getContext("2d"); if (window.navigator.msPointerEnabled) { canvas.addEventListener("MSPointerMove", paint, false); } else { canvas.addEventListener("mousemove", paint, false); } function paint(event) { // paint a small rectangle every time the event fires. context.fillRect(event.clientX, event.clientY, 5, 5); } }); </script> </head> <body> <canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;">Canvas isn't supported by this browser or document mode</canvas> </body> </html>
Pratiques courantes pour l’optimisation de l’entrée tactile
Internet Explorer 10 comporte des fonctionnalités courantes par défaut pour les interactions tactiles de base, par exemple :
- Panoramique pour les régions avec défilement
- Zoom par pincement
- Menus contextuels d’appui prolongé
- Sélection d’entrée tactile
Ces fonctionnalités se déclenchent automatiquement pour que les sites et les applications offrent une expérience tactile excellente par défaut. Cependant, il peut être nécessaire de les désactiver selon vos besoins.
Test de la prise en charge tactile
Le test des fonctionnalités tactiles et de la prise en charge de l’interaction tactile multipoint est simple à l’aide de la propriété msMaxTouchPoints. Pour vérifier si un périphérique peut prendre en charge les fonctions tactiles et, si tel est le cas, combien de points, utilisez le code suivant :
// To test for touch capable hardware
if(navigator.msMaxTouchPoints) { ... }
// To test for multi-touch capable hardware
if(navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { ... }
// To get the maximum number of points the hardware supports
var touchPoints = navigator.msMaxTouchPoints;
Panoramique et zoom
Les événements de pointeur ne se déclencheront pas lors d’un panoramique ou d’un zoom. Dans des scénarios tels que l’exemple précédent d’application de peinture, désactivez les événements de panoramique et de zoom sur une région pour pouvoir utiliser ces événements à d’autres fins. Pour ce faire, utilisez par exemple CSS (Cascading Style Sheets).
.disablePanZoom {
-ms-touch-action: none; /* Disables all pan/zoom behaviors and fire pointer events in JavaScript instead. */
}
Sélection d’entrée tactile
Vous pouvez sélectionner un mot avec le doigt dans Internet Explorer 10 en appuyant sur le texte ou juste à côté. Si vous voulez désactiver la sélection de texte, procédez de la même manière que dans Windows Internet Explorer 9.
element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false); // Disables selection
Menus contextuels
Le fait d’appuyer un certain temps sur des éléments dans Windows Internet Explorer affiche un élément visuel qui indique qu’un menu contextuel va apparaître. Si vous levez votre doigt, le menu contextuel s’affiche. Si vous éloignez votre doigt, le visuel ne s’affiche pas et le menu contextuel n’apparaît pas.
Si vous souhaitez utiliser votre propre menu contextuel, vous pouvez le faire avec Internet Explorer 10. Il vous suffit d’appeler event.preventDefault sur l’événement contextmenu et d’exécuter du code pour afficher votre menu contextuel. Internet Explorer affiche automatiquement le menu contextuel par pression du doigt et fournit le même visuel indicatif en maintenant la pression. Cet exemple utilise un événement contextmenu pour déterminer le moment où l’utilisateur a appuyé de manière prolongée sur un élément, puis a cessé de le faire. Quand l’utilisateur lève son doigt, l’événement contextmenu se déclenche et un message s’affiche.
<!DOCTYPE html> <html > <head> <title>Touch and hold example</title> <style> #touchspot { width:100px; height:100px; background-color:aquamarine; border:solid 2px black; } </style> </head> <body> <div id="touchspot">Touch and hold me</div> <script> var elm = document.getElementById("touchspot"); elm.addEventListener("contextmenu", function (e) { e.target.innerHTML = "Touch has pressed, held, and lifted, or mouse has been right clicked. Time to show a custom menu."; e.preventDefault(); // Disables system menu }, false); </script> </body> </html>
Si vous ne voulez pas afficher du tout un menu contextuel, par exemple pour un jeu qui nécessite que l’utilisateur appuie sur un élément pendant un certain temps, vous devez alors désactiver le menu contextuel et le visuel indicatif par défaut. Pour ce faire, il vous suffit d’annuler deux événements.
// Disables visual element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false); // Disables menu element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
Événements et objet de mouvement
En plus des événements de pointeur, Windows 8 a la capacité de reconnaître les interactions complexes appelées mouvements (comme pincer, balayer, etc.) de la même manière quelles que soient les applications.
Remarque Les API décrites dans cette section ne sont pas prises en charge dans Windows 7.
L’objet MSGesture utilisé dans l’exemple précédent permet d’effectuer facilement des mouvements de niveau supérieur tels que les pointages, les panoramiques et les appuis sans que vous n’ayez à capturer chaque événement de pointeur vous-même. Le piège est que vous devez capturer l’événement onmspointerdown et configurer l’objet MSGesture avec la cible (l’objet duquel vous voulez des événements de mouvement), et l’élément pointerId. Sans instancier ni configurer un objet MSGesture, votre élément déclenche uniquement des événements de pointeur.
Les événements de mouvement intègrent plus d’informations que de simples événements de pointeur. Par exemple, quand un utilisateur touche l’écran et retire son doigt immédiatement, cela déclenche un événement MSGestureTap. Si l’utilisateur touche la surface et garde son doigt à cet endroit, cela déclenche un événement MSGestureHold.
Quand l’utilisateur balaye l’écran du doigt, les événements MSGestureStart, MSGestureChange et MSGestureEnd sont déclenchés.
Si l’utilisateur effectue un mouvement de balayage rapide et lève son doigt, cette action déclenche un événement MSInertiaStart.
Remarque Vous pouvez détecter le moment où un mouvement est dans sa phase d’inertie lorsque la propriété detail de l’événement MSGestureChange est égale à event.MSGESTURE_FLAG_INERTIA.
L’inertie est un mouvement qui continue après avoir quitté l’écran. La prise en charge de l’inertie est intégrée aux objets de mouvement dans Internet Explorer 10 et ne requiert aucun code supplémentaire autre que les gestionnaires des événements. L’événement MSInertiaStart est suivi d’une série d’événements MSGestureChange, en fonction de la vitesse du balayage, avant le déclenchement de l’événement MSGestureEnd. L’événement MSInertiaStart est déclenché uniquement lorsque la vitesse est suffisante pour un balayage et peut vous aider à coder la différenciation entre un mouvement lent et un raccourci rapide.
Voici les principaux événements de mouvement :
- Événement MSGestureTap
- Événement MSGestureHold
- Événement MSGestureStart
- Événement MSGestureChange
- Événement MSGestureEnd
- Événement MSInertiaStart
L’objet MSGestureEvent qui est passé à chaque événement retourne des propriétés qui aident votre application à déterminer l’état de l’objet qui est manipulé. Pour savoir si l’utilisateur a tenté de procéder à un zoom ou à un redimensionnement de l’élément, utilisez la propriété scale. Si l’utilisateur fait pivoter l’élément sur l’écran, vous pouvez obtenir l’angle en radians avec la propriété rotation. Ces deux propriétés représentent des modifications qui ont été apportées depuis le dernier MSGestureEvent.
Indicateurs de mouvement
Les indicateurs MSGesture retournent l’état d’un objet événement, tel que MSGestureStart, MSGestureChange ou MSGestureHold. Ces indicateurs sont les suivants :
- MSGESTURE_FLAG_NONE : aucun état spécial.
- MSGESTURE_FLAG_BEGIN : indique le début d’un événement de mouvement.
- MSGESTURE_FLAG_BEGIN : indique la fin d’un événement de mouvement.
- MSGESTURE_FLAG_CANCEL : indique que l’événement de mouvement a été annulé.
- MSGESTURE_FLAG_INERTIA : indique que l’ordinateur est dans sa phase d’inertie.
Par exemple, si un utilisateur balaye l’écran du doigt, les événements et détails répondent de la façon suivante :
- L’événement MSGestureStart est déclenché avec l’indicateur MSGESTURE_FLAG_BEGIN.
- Lorsque l’utilisateur déplace son doigt, l’événement MSGestureChange est déclenché à plusieurs reprises avec l’indicateur MSGESTURE_FLAG_NONE qui est transmis via la propriété de détail.
- Lorsque l’utilisateur lève son doigt, l’événement MSInertiaStart se déclenche et transmet l’indicateur MSGESTURE_FLAG_INERTIA.
- Tant que l’élément est toujours en mouvement sur l’écran, l’événement MSGestureChange continue d’être déclenché avec l’indicateur MSGESTURE_FLAG_INERTIA qui est transmis.
- Lorsque le mouvement se termine, l’événement MSGestureEnd se déclenche et deux indicateurs, MSGESTURE_FLAG_INERTIA et MSGESTURE_FLAG_END, sont transmis avec la propriété de détail.
Si un utilisateur maintient la pression pendant quelques secondes, puis déplace son doigt, les événements et détails se présentent comme suit :
- Après quelques secondes, l’événement MSGestureHold se déclenche et transmet l’indicateur MSGESTURE_FLAG_BEGIN.
- Lorsque l’utilisateur commence à déplacer son doigt, l’événement MSGestureHold se déclenche et transmet les indicateurs MSGESTURE_FLAG_END et MSGESTURE_FLAG_CANCEL. Cela signale que l’appui prolongé a été annulé.
- Lorsque l’utilisateur déplace son doigt, l’événement MSGestureChange est déclenché à plusieurs reprises alors que l’indicateur MSGESTURE_FLAG_NONE est transmis via la propriété de détail. À partir d’ici, les étapes se déroulent comme dans la séquence précédente.
- Lorsque l’utilisateur lève son doigt, l’événement MSInertiaStart se déclenche et transmet l’indicateur MSGESTURE_FLAG_INERTIA.
- Tant que l’élément est toujours en mouvement sur l’écran, l’événement MSGestureChange continue d’être déclenché avec l’indicateur MSGESTURE_FLAG_INERTIA qui est transmis.
- Lorsque le mouvement se termine, l’événement MSGestureEnd se déclenche et deux indicateurs, MSGESTURE_FLAG_INERTIA et MSGESTURE_FLAG_END, sont transmis avec la propriété de détail.
Pour obtenir un exemple d’application complet illustrant les événements de mouvement en action, voir la MSGesture rubrique de référence.
Informations de référence sur les API
Exemples et didacticiels
- Concevoir des sites Web adaptatifs
- Fonctionnalités pour la gestion adaptative des entrées
- Comment explorer l’ensemble de Mandelbrot à l’aide de HTML5
- Comment simuler le pointage sur des appareils tactiles
- Comment utiliser une zone de dessin, SVG et des interactions tactiles multipoints pour créer un jeu de puzzle en mosaïque
- Préparer votre site aux interactions tactiles
- Exemples de pointeurs et de mouvements
- Défilement, mouvement panoramique et zoom tactiles
Démonstrations du site Internet Explorer Test Drive
Billets IEBlog
- 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
- Aller au-delà du panorama, de l’agrandissement et de l’appui à l’aide d’événements de mouvements
- 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
Rubriques associées
- Hand.js : polyfill de prise en charge des événements de pointeur sur tous les navigateurs
- Défilement et zoom tactiles
