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

Cet article présente principalement la méthode d'implémentation de l'événement tactile HTML5 pour implémenter une simple barre de progression sur le terminal mobile. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.

Avant-propos

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, je vais en présenter quelques-uns utiles. ceux. Événements tactiles mobiles : touchstart, touchmove, touchend.

Introduction

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 attributs dom communs. De plus, ils contiennent également trois attributs 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 indiquant 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 dans 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 séance pratique

Combat pratique

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

Définissons d'abord le HTML

<p class="progress-wrapper">
    <p class="progress"></p>
    <p class="progress-btn"></p>
</p>

La partie CSS est omise ici

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

const progressWrapper = document.querySelector('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0
let btnLeft = 0

Écoutez l'événement touchstart

progressBtn.addEventListener('touchstart', e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 获取触摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性
})

Écoutez l'événement touchmove

progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint // 通过当前位置与初始位置之差计算改变的距离
    let btnLeftStyle = btnLeft + diffX // 为按钮定义新的left值

    touch.target.style.left = btnLeftStyle + 'px'

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 通过按钮的left值与进度条容器长度的比值，计算进度条的长度百分比
})

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 produira. >

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

À ce stade, une simple barre de défilement mobile a été mise en œuvre

Recommandations associées :

Comment pour utiliser et créer des sous-titres vidéo HTML5

Utilisation des balises audio et vidéo en HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!