Commentaire: La plupart des interactions sur les téléphones mobiles sont réalisées via Touch, donc pour les sites Web interactifs à écran tactile, les événements tactiles sont très importants. Ici, nous présentons plusieurs événements tactiles qui sont plus populaires. Vous pouvez tester cet événement dans la plupart des navigateurs modernes. Les amis intéressés peuvent en apprendre davantage.
PréfaceQuelle est la différence entre un site Web à écran tactile et un site Web de PC traditionnel? Les changements dans les méthodes d'interaction sont les premiers à être affectés. Par exemple, l'événement de clic que nous utilisons souvent est si impuissant sous des appareils à écran tactile.
La plupart des interactions sur le téléphone mobile sont réalisées grâce à TACK, donc les événements tactiles sont très importants pour les sites Web interactifs avec des écrans tactiles.
Apple a introduit l'API de l'événement tactile dans iOS 2.0, et Android rattrape cette norme de fait pour réduire l'écart. Récemment, un groupe de travail W3C travaille ensemble pour formuler cette norme d'événement tactile.
spécification
Ici, nous présentons plusieurs événements tactiles qui sont plus populaires. Vous pouvez tester cet événement dans la plupart des navigateurs modernes (doit être un appareil à écran tactile):
Touchstart: déclenché lorsque le toucher commence
TouchMove: déclenché lorsque le doigt glisse sur l'écran
Touchend: déclenché lorsque le toucher se termine
Chaque événement tactile comprend trois listes de touches, chaque liste contient une série de points de contact correspondante (utilisée pour implémenter le multi-touch):
Touche: une liste de tous les doigts actuellement situés à l'écran.
TargetTouches: Liste des doigts situés sur l'élément DOM actuel.
ChangedTouches: Liste des doigts impliquant l'événement actuel.
Chaque point de contact contient les informations tactiles suivantes (couramment utilisées):
Identifiant: une valeur qui identifie de manière unique le doigt actuel dans la session tactile. Généralement, le numéro de flux à partir de 0 (Android4.1, UC)
Target: élément DOM, est la cible ciblée par l'action.
Pagex / Pagex / ClientX / Clienty / ScreenX / Screeny: une valeur, où l'action se produit sur l'écran (la page contient la distance de défilement, le client ne contient pas la distance de défilement, l'écran est basé sur l'écran).
RADIUSX / RADIUSY / ROTATATIONAGNE: Dessinez une ellipse approximativement équivalente à la forme d'un doigt, de deux rayons et de l'angle de rotation de l'ellipse respectivement. Le navigateur de test préliminaire ne le prend pas en charge, mais heureusement, les fonctions ne sont pas couramment utilisées, donc tout le monde est le bienvenu.
Avec ces informations, nous pouvons fournir aux utilisateurs des commentaires différents en fonction de ces informations sur l'événement.
Ci-dessous, je vais vous montrer une petite démo, une traînée à doigt à l'aide de Touchmove:
/ * Glisser avec un seul doigt * /
var obj = document.getElementById ('id');
obj.addeventListener ('TouchMove', fonction (événement) {
// s'il n'y a qu'un seul doigt dans la position de cet élément
if (event.targetTouches.length == 1) {
event.preventDefault (); // bloquez l'événement par défaut du navigateur, important
var touch = event.TargetTouches [0];
// Mette l'élément où est votre doigt
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
}
}, FAUX);
Conseils sur les quatre pseudo-classes d'une étiquette dans les appareils à écran tactile:
Nous savons tous que les quatre pseudo-classes du lien A TAG, visitées, actives et survolent sont conçues pour des événements de clic, alors essayez de ne pas les utiliser dans les sites Web à écran tactile. La plupart des tests ne sont également pas disponibles. Mais voici un petit truc pour survoler. Lorsque vous cliquez sur un bouton, le bouton restera à l'état de survol. À l'heure actuelle, le CSS que vous définissez en fonction de cette pseudo-classe fonctionne également jusqu'à ce que vous cliquez sur un autre bouton avec votre doigt, l'état de survol sera transféré vers un autre bouton. En utilisant cela, nous pouvons faire quelques petits effets. Cette astuce est toujours disponible dans la plupart des navigateurs.
Les idéaux sont pleins, la réalité est maigre!
Bien que W3C soit prêt pour le multi-touch, malheureusement, peu de navigateurs prennent en charge les fonctionnalités multi-touchs, en particulier les navigateurs sur les plates-formes Android, ce qui fait que la liste des doigts est introduite ci-dessus devient vide. La capture de deux points de contact mènera directement à une défaillance tactile! Heureusement, le navigateur Safari fourni avec des appareils iOS peut prendre en charge cette fonctionnalité, ce qui nous fait pleurer d'espoir pour l'avenir. Après tout, nous avons été emprisonnés par le fonctionnement à point unique de la souris pendant trop longtemps. Comme il est excitant d'utiliser davantage un site Web!