Méthode d'implémentation d'un événement tactile HTML5 pour implémenter une barre de progression simple sur un terminal mobile

De nombreux nouveaux événements ont été ajoutés au HTML, mais en raison de problèmes de compatibilité, de nombreux événements ne sont pas largement utilisés. Ensuite, nous présenterons quelques événements tactiles mobiles utiles : touchstart, touchmove, touchend.

Présentons brièvement ces événements :

1. touchstart : déclenché lorsqu'un doigt touche l'écran, même s'il y a déjà un doigt sur l'écran.
2. touchmove : Déclenché en continu lorsque le doigt glisse sur l'écran. Lors de cet événement, l'appel de l'événement PreventDefault() peut empêcher le défilement.
3. touchend : déclenché lorsque le doigt quitte l'écran.

Ces événements tactiles ont des propriétés dom communes. De plus, ils contiennent trois propriétés pour le suivi des touches :

1. touches : un tableau d'objets tactiles représentant les opérations tactiles actuellement suivies.
2. targetTouches : tableau d'objets Touch spécifiques aux cibles d'événement.
3. changeTouches : un tableau d'objets Touch qui représente ce qui a changé depuis le dernier contact.

Chaque objet tactile contient les propriétés suivantes :

1. clientX : la coordonnée x de la cible tactile dans la fenêtre.
2. clientY : la coordonnée y de la cible tactile dans la fenêtre.
3. pageX : la coordonnée x de la cible tactile dans la page.
4. pageY : la coordonnée y de la cible tactile dans la page.
5. screenX : screenX : La coordonnée x de la cible tactile sur l'écran.
6. screenY : screenX : La coordonnée x de la cible tactile dans l’écran.
7. identifiant : un identifiant unique qui identifie le toucher.
8. target : screenX : La coordonnée x de la cible tactile dans l'écran.

Maintenant que vous comprenez les caractéristiques des événements tactiles, commençons la passionnante session pratique.

Utilisons les événements tactiles pour implémenter une barre de progression coulissante côté mobile.

Commençons par présenter le code HTML

 <div class=progress-wrapper> <div class=progress></div> <div class=progress-btn></div></div>

Partie CSS omise ici

Récupérez l'élément dom et initialisez le point de départ du toucher et la distance entre le bouton et la partie la plus à gauche du conteneur

 const progressWrapper = document.querySelector('.progress-wrapper')const progress = document.querySelector('.progress')const progressBtn = document.querySelector('.progress-btn')const progressWrapperWidth = progressWrapper.offsetWidthlet touchPoint = 0let btnLeft = 0

Écoutez l'événement touchstart

 progressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // Récupère la position initiale du toucher btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // Ignorer la compatibilité du navigateur IE ici})

Écoutez les événements Touchmove

 progressBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // Calcule la distance modifiée par la différence entre la position actuelle et la position initiale position let btnLeftStyle = btnLeft + diffX // Définir une nouvelle valeur gauche pour le bouton touch.target.style.left = btnLeftStyle + 'px' progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // Calcule le pourcentage de longueur de la barre de progression grâce au rapport entre la valeur gauche du bouton et la longueur du conteneur de la barre de progression})

Grâce à une série d'opérations logiques, notre barre de progression a été essentiellement implémentée, mais un problème a été découvert lorsque la position tactile dépasse le conteneur de la barre de progression, un bug se produit.

 if (btnLeftStyle > progressWrapperWidth) { btnLeftStyle = progressWrapperWidth } else if (btnLeftStyle < 0) { btnLeftStyle = 0}

À ce stade, une simple barre de défilement mobile a été implémentée

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.