Événements de mouvement

Les événements de mouvement reposent sur le modèle des événements de pointeur (Pointer Events) du W3C. Les événements de mouvement peuvent vous aider à reconnaître des interactions utilisateur tactiles plus complexes (comme le pincement, la rotation, le balayage et le glissement) et à y répondre sans avoir à capturer ou à interpréter vous-même les événements de pointeur individuels.

Remarque  Les API traitées dans cette section ne sont pas prises en charge dans Windows 7 ou version antérieure.

Événements de mouvement et objet MSGesture

Pour gérer les mouvements dans votre site, la première étape consiste à instancier un objet de mouvement.


var myGesture = new MSGesture();

Ensuite, donnez au mouvement un élément cible. Il s’agit de l’élément sur lequel le navigateur va déclencher les événements de mouvement. Cet élément détermine aussi l’espace de coordonnées pour les événements.


elm = document.getElementById("someElement");
myGesture.target = elm;
elm.addEventListener("MSGestureChange", handleGesture);

Enfin, indiquez à l’objet de mouvement les pointeurs à traiter dans sa reconnaissance de mouvement.


elm.addEventListener("pointerdown", function (evt) {
// adds the current mouse, pen, or touch contact for gesture recognition
myGesture.addPointer(evt.pointerId);
});

Remarque  Utilisez la propriété CSS (Cascading Style Sheets) touchAction pour configurer l’élément de telle sorte qu’il fournisse des événements de pointeur à l’entrée au lieu de procéder aux actions tactiles par défaut (panoramique et zoom, par exemple). Pour plus d’informations, voir Contrôle de l’expérience tactile par défaut.

Gestion des événements de mouvement

Une fois qu’un objet de mouvement possède une cible valide et au moins un pointeur, il commence à déclencher des événements de mouvement. L’objet MSGestureEvent qui est distribué en réponse à ces événements contient un objet information décrivant l’échelle (pincement), la rotation, la translation et la vitesse. Sa propriété detail contient des informations supplémentaires sur le statut de l’événement de mouvement sous la forme d’un masque de bits d’indicateurs :

Indicateur de mouvementValeurDescription
MSGESTURE_FLAG_NONE0Statut normal.
MSGESTURE_FLAG_BEGIN1L’événement de mouvement a commencé.
MSGESTURE_FLAG_END2L’événement de mouvement est terminé.
MSGESTURE_FLAG_CANCEL4L’événement de mouvement a été annulé. Il est souvent combiné avec l’opérateur AND à MSGESTURE_FLAG_END.
MSGESTURE_FLAG_INERTIA8Le mouvement est dans sa phase d’inertie. Cet indicateur est envoyé de manière continue par le biais d’un événement MSGestureChange lorsqu’un élément se déplace à l’écran.

 

Pour plus d’informations, voir la section "Remarques" de la référence Gesture flags.

Mouvements simples et complexes

Les événements de mouvement peuvent être simples (comme un appui ou un appui prolongé) ou complexes (comme un pincement, une rotation ou un glissement).

Appui

L’appui est le mouvement le plus élémentaire pouvant être reconnu. Lorsqu’un appui est détecté, l’événement MSGestureTap est déclenché au niveau de l’élément cible de l’objet de mouvement. Contrairement à l’événement click, un appui ne déclenche un événement que lorsque l’utilisateur touche l’écran avec un doigt (ou appuie sur un bouton de la souris ou touche un stylet), puis retire son doigt sans bouger celui-ci à la surface de l’écran. Ceci peut s’avérer utile si vous souhaitez faire la différence entre un appui sur un élément et le glissement de celui-ci.

Appui prolongé

Un appui prolongé se produit lorsqu’un utilisateur touche l’écran avec un doigt, attend un moment, puis retire son doigt sans bouger celui-ci à la surface de l’écran. Lors d’un appui prolongé, l’événement MSGestureHold est déclenché plusieurs fois pour les différents états du mouvement :


element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signals the start of a gesture. For the hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signals the end of the gesture.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}


Mouvements complexes (pincement, rotation, balayage et glissement)

Les mouvements dynamiques, comme le pincement ou la rotation, sont indiqués sous forme de transformations semblables aux transformations 2D CSS. Trois événements sont déclenchés pour les mouvements dynamiques : MSGestureStart, MSGestureChange (déclenché à plusieurs reprises pendant la durée du mouvement) et MSGestureEnd.

Les mouvements dynamiques étant indiqués sous forme de transformations, il est facile d’utiliser l’objet MSGesture avec les transformations 2D CSS pour manipuler un élément comme une photo ou un morceau de puzzle. Vous pouvez activer la mise à l’échelle, la rotation et le glissement d’un élément à l’aide de code semblable à celui-ci :


targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
 
var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
.rotate(e.rotation * 180 / Math.PI) // Apply Rotation
.scale(e.scale) // Apply Scale
.translate(e.translationX, e.translationY) // Apply Translation
.translate(-e.offsetX, -e.offsetY); // Move the transform origin back
}


Pour effectuer des mouvements dynamiques tels que la mise à échelle et la rotation, faites tourner la roulette de la souris et appuyez sur la touche de modification CTRL ou SHIFT, respectivement.

À propos de l’inertie

L’inertie est un mouvement qui se poursuit après le dernier contact avec l’écran. La prise en charge de l’inertie est intégrée aux objets de mouvement et ne requiert aucun code supplémentaire autre que des gestionnaires pour les é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.

Informations de référence sur les API

MSGesture
MSGestureEvent
MSManipulationEvent

Exemples et didacticiels

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émonstrations du site Internet Explorer Test Drive

Mandelbrot Explorer
Browser Surface
Touch Effects
Brick Breaker

Billets IEBlog

IE11 : navigation tactile pour le Web d’aujourd’hui et de demain
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

Rubriques connexes

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

 

 

Afficher:
© 2014 Microsoft