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.
introduirePrésentons brièvement ces événements :
Ces événements tactiles ont des propriétés dom communes. De plus, ils contiennent trois propriétés pour le suivi des touches :
Chaque objet tactile contient les propriétés suivantes :
Maintenant que vous comprenez les caractéristiques des événements tactiles, commençons la passionnante session pratique.
Combat réelUtilisons 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.