Introduction aux événements tactiles dans la création de sites Web à écran tactile avec des compétences didactiques html5_html5

Avant-propos
Quelle est la différence entre un site Web à écran tactile et un site Web traditionnel sur PC ? Les changements dans les modes d'interaction en font les frais. Par exemple, notre événement de clic couramment utilisé est si impuissant sur les appareils à écran tactile.
La plupart des interactions sur les téléphones mobiles sont réalisées grâce au toucher, donc pour les sites Web interactifs à écran tactile, les événements tactiles sont très importants.
Apple a introduit l'API d'événements tactiles dans iOS 2.0, et Android rattrape ce standard de facto et réduit l'écart. Récemment, un groupe de travail du W3C a travaillé ensemble pour développer cette spécification d'événement tactile.

Spécifications
Nous présentons ici plusieurs événements tactiles populaires. Vous pouvez tester cet événement dans la plupart des navigateurs modernes (il doit s'agir d'un appareil à écran tactile Oh) :
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
Et chaque événement tactile comprend trois listes de touches, chaque liste contient une série correspondante de points tactiles (utilisés pour implémenter le multi-touch) :
touches : Une liste de tous les doigts actuellement sur l'écran.
targetTouches : Une liste de doigts situés sur l'élément DOM actuel.
changedTouches : une liste de doigts impliqués dans l'événement en cours.
Chaque point tactile contient les informations tactiles suivantes (couramment utilisées) :
identifiant : une valeur numérique qui identifie de manière unique le doigt actuel dans la session tactile. Généralement un numéro de série commençant à 0 (android4.1, uc)
target : élément DOM, qui est la cible de l'action.
pageX/pageX/clientX/clientY/screenX/screenY : une valeur, la position sur l'écran où l'action se produit (la page inclut la distance de défilement, le client n'inclut pas la distance de défilement et l'écran est basé sur l'écran) .
radiusX/radiusY/rotationAngle : dessinez une ellipse à peu près équivalente à la forme d'un doigt, avec respectivement les deux rayons et angles de rotation de l'ellipse. Le navigateur de test préliminaire ne le prend pas en charge. Heureusement, la fonction n'est pas couramment utilisée. Les commentaires sont les bienvenus.
Grâce à ces informations, nous pouvons fournir différents commentaires aux utilisateurs en fonction de ces informations sur l'événement.

Ci-dessous, je vais vous montrer une petite démo, glisser avec un seul doigt à l'aide de touchmove  :

Copiez le code

Le code est le suivant :

/*Faites glisser avec un doigt*/
var obj = document.getElementById('id'); obj .addEventListener('touchmove', function(event) {
// S'il n'y a qu'un seul doigt à la position de cet élément
if (event.targetTouches.length == 1) {
　 événement. PreventDefault() ;// Empêcher les événements par défaut du navigateur, important
var touch = event.targetTouches[0]
// Placez l'élément là où se trouve votre doigt
obj.style.left = touch.pageX- 50 'px';
obj.style.top = touch.pageY-50 'px';
}
},

À propos d'une balise) quatre conseils pour les pseudo-classes dans les appareils à écran tactile  : Nous savons tous que les quatre pseudo-classes de la balise a, lien, visité, actif et survol, sont spécialement conçues pour les événements de clic, alors essayez pour les utiliser sur des sites Web à écran tactile. Ne les utilisez pas. Après tests, la plupart d’entre eux sont indisponibles. Mais voici une petite astuce concernant le survol. Après avoir cliqué sur un bouton, le bouton sera toujours en état de survol. À ce moment-là, le CSS que vous avez défini en fonction de cette pseudo-classe fonctionnera également jusqu'à ce que vous en cliquiez un autre avec votre doigt. . Avec un bouton, l'état de survol sera transféré à un autre bouton. En utilisant cela, nous pouvons créer de petits effets. Cette astuce fonctionne toujours dans la plupart des navigateurs.


Les idéaux sont pleins, la réalité est maigre ! Bien que le w3c soit prêt pour le multi-touch, malheureusement peu de navigateurs prennent en charge les fonctionnalités multi-touch, en particulier les navigateurs sur la plate-forme Android, ce qui fait que la liste de doigts présentée ci-dessus devient un discours vide, la capture de deux points de contact entraînera directement un échec tactile ! Heureusement, le navigateur Safari fourni avec les appareils iOS peut prendre en charge cette fonctionnalité, ce qui nous donne plein d'espoir pour l'avenir. Après tout, nous avons été emprisonnés pendant trop longtemps par le fonctionnement en un seul clic de la souris. Comme c'est excitant de gérer un site Web avec plusieurs doigts !