Informations
Le sujet que vous avez demandé est indiqué ci-dessous. Toutefois, ce sujet ne figure pas dans la bibliothèque.

Événements de pointeur et de mouvement dans Internet Explorer 10

Remarque  Pour accéder aux informations les plus récentes sur ces sujets, voir les rubriques Événements de pointeur et Événements de mouvement.

Attention  La spécification W3C Pointer Events a subi plusieurs révisions depuis son implémentation dans Internet Explorer 10. Par ailleurs, les préfixes de fournisseur MS sur les API Pointer Events sont déconseillés à compter d’Internet Explorer 11. Pour obtenir un résumé des modifications et des meilleures pratiques en matière de compatibilité, voir Mises à jour des événements de pointeur.

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 de 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 :

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.

Rubriques connexes

Événements de mouvement
Événements de pointeur

 

 

Afficher:
© 2014 Microsoft