Introduction à l'utilisation avancée des gestes dans JavaScript

Commentaire: La prise en charge de la reconnaissance nouvellement ajoutée pour la saisie des utilisateurs avancés dans IE10, donnez un exemple: enregistrez une opération de clic, et vous pouvez savoir quel appareil le clic de l'utilisateur actuel est, qu'il s'agisse d'un clic du doigt, d'un clic de souris ou d'un clic stylet (le tableau de tablette aura un stylet)

IE10 Support de reconnaissance nouvellement ajouté pour la saisie des utilisateurs avancés, par exemple: enregistrez une opération de clic, et via une phrase AddEventListener, vous pouvez savoir quel périphérique le clic de l'utilisateur actuel est un clic du doigt, un clic de souris ou un clic stylet (la tablette aura un stylet).

Le code ci-dessus peut identifier le périphérique que le clic de l'utilisateur actuel est, et il porte également des jugements via la méthode de rappel e.pointerType. La souris est 4, le stylet est 3 et le doigt est 2. Quant à quel type d'équipement est une valeur de 1, il reste à étudier.

Une autre chose à noter est que vous souhaitez ajouter l'identification du périphérique d'entrée dans JavaScript, et les événements de la méthode d'enregistrement sont également un peu différents.

addEventListener L'événement ajouté est mspointerdown

Dans IE10, les clics des doigts préférés en reconnaissance de ces différents appareils ne sont pas affectés par la fonction normale de clic. Cependant, IE10 reconnaît non seulement le périphérique d'entrée de l'utilisateur, mais prend également en charge de nombreux gestes avancés.

Ce qui suit est une démonstration du soutien aux gestes avancés IE10

Créer des objets gestiques

La première étape de la gestion des gestes de votre site Web consiste à instancier l'objet geste.

var Mygestture = new MSGreture ();

Ensuite, fournissez un élément cible pour le geste. Le navigateur déclenchera un événement de geste pour cet élément. Dans le même temps, cet élément peut également déterminer l'espace de coordonnées de l'événement.

Elm = document.getElementById (SomeElement);

MyGgeture.target = Elm;

Elm.AddeventListener (MsgestureChange, HandleIngesture);

Enfin, dites à l'objet geste qui pointe pour traiter pendant la reconnaissance des gestes.

elm.addeventListener (mspointerdown, fonction (evt) {

// ajoute le contact actuel de souris, de stylo ou de contact pour la reconnaissance des gestes

MyGgeture.AddPointer (evt.poINTERID);

});

Remarque: n'oubliez pas que vous devez utiliser --MS-Touch-action pour configurer des éléments pour les empêcher d'effectuer des actions tactiles par défaut (par exemple, Pan et Zoom), et fournir des événements de pointeur pour l'entrée.

Une fois que l'objet geste a une cible valide et a au moins un pointeur ajouté, il commencera à déclencher l'événement gesture. Les événements de gestes peuvent être divisés en deux types: les gestes statiques (par exemple, cliquer ou maintenir) et les gestes dynamiques (par exemple, rétrécir, tourner et glisser).

La reconnaissance des gestes la plus élémentaire est les clics. Lorsqu'un clic est détecté, l'événement MSEGTURETAP sera déclenché sur l'élément cible de l'objet geste. Contrairement aux événements de clic, les gestes de clic ne peuvent être déclenchés que lorsque l'utilisateur touche, appuye sur le bouton de la souris ou utilise un stylet pour toucher sans se déplacer. Ceci est généralement très utile si vous souhaitez distinguer les éléments de clic de l'utilisateur et de faire glisser les éléments.

Un geste de presse à long terme fait référence au fonctionnement de l'utilisateur touchant l'écran avec un doigt et en le maintenant un instant et en le soulevant sans le déplacer. Au cours de l'interaction à longue presse, l'événement MSEGtturehold sera licencié plusieurs fois pour divers états du geste:

element.AddeventListener ("MSEGTUREHHOLD", Handlehold);

Poignée de fonction (EVT) {

if (evt.detail & evt.msestture_flag_begin) {

// Commencer signal le début d'un geste. Pour le geste de maintien, cela signifie que l'utilisateur s'est maintenu assez longtemps en place pour que le geste devienne une presse complète et une main-d'œuvre si le doigt est levé.

}

if (evt.detail & evt.msestture_flag_end) {

// Fin des signaux la fin du geste.

}

if (evt.detail & evt.msestture_flag_cancel) {

// Annuler les signaux que l'utilisateur a commencé le geste mais l'a annulé. Pour Hold, cela se produit lorsque l'utilisateur s'éloigne avant de le lever. Ce drapeau est envoyé avec le drapeau final, signalant la reconnaissance des gestes est terminée.

}

}

Gestes dynamiques (contraction, rotation, balayage et traînée)

Des gestes dynamiques (par exemple, rétrécissant ou rotation) seront signalés sous la forme d'une transformation, qui est assez similaire à la transformation CSS 2D. Les gestes dynamiques peuvent déclencher trois événements: MSGETURESTART, MSGETURECHANGE (déclencheurs répétés au fur et à mesure que le geste se poursuit) et Msgestureend. Chaque événement contient des informations sur la mise à l'échelle (rétrécissement), la rotation, la conversion et la vitesse.

Étant donné que les gestes dynamiques sont signalés dans les conversions, il sera très facile d'utiliser MSGgeture avec les conversions CSS 2D pour manipuler des éléments tels que des photos ou des puzzles. Par exemple, vous pouvez activer les éléments de mise à l'échelle, de rotation et de traînée de la manière suivante:

TargetElement.AdDeventListener ("MSEGTURECHANGE", ManipulateElement);

fonction manipulateElement (e) {

// Décommente le code suivant si vous souhaitez désactiver l'inertie intégrée fournie par la reconnaissance des gestes dynamiques

// if (e.detail == e.mgestture_flag_inertia)

// retour;

var m = new MSCSSMatrix (e.target.style.transform); // Obtenez la dernière transformation CSS sur l'élément

e.target.style.transform = m

.TRANSLATE (E.Offsetx, E.Offsety) // Déplacez l'origine de la transformation sous le centre du geste

.rotate (e.rotation * 180 / math.pi) // Appliquer la rotation

.Scale (e.scale) // Appliquer une échelle

.translate (e.translationx, e.translationy) // Appliquer la traduction

.Translate (-e.offsetx, -e.offSety); // rejette l'origine de la transformation

}

Les gestes dynamiques tels que le zoom et la rotation peuvent prendre en charge les opérations de souris, qui peuvent être réalisées en utilisant respectivement les modificateurs Ctrl ou Shift lors de la rotation de la roue de la souris.