Método de implementación del evento táctil HTML5 para implementar una barra de progreso simple en un terminal móvil

Se han agregado muchos eventos nuevos a HTML, pero debido a problemas de compatibilidad, muchos eventos no se utilizan ampliamente. A continuación, presentaremos algunos eventos táctiles móviles útiles: touchstart, touchmove, touchend.

Presentemos brevemente estos eventos:

1. touchstart: se activa cuando un dedo toca la pantalla, incluso si ya hay un dedo en la pantalla.
2. touchmove: Se activa continuamente cuando el dedo se desliza sobre la pantalla. Durante este evento, llamar al evento preventDefault() puede evitar el desplazamiento.
3. touchend: se activa cuando el dedo sale de la pantalla.

Estos eventos táctiles tienen propiedades dom comunes. Además, contienen tres propiedades para el seguimiento de toques:

1. toques: una serie de objetos táctiles que representan las operaciones táctiles actualmente rastreadas.
2. targetTouches: conjunto de objetos táctiles específicos de los objetivos del evento.
3. changeTouches: una matriz de objetos Touch que representa lo que ha cambiado desde el último toque.

Cada objeto táctil contiene las siguientes propiedades:

1. clientX: la coordenada x del objetivo táctil en la ventana gráfica.
2. clienteY: la coordenada y del objetivo táctil en la ventana gráfica.
3. pageX: la coordenada x del objetivo táctil en la página.
4. pageY: la coordenada y del objetivo táctil en la página.
5. screenX: screenX: la coordenada x del objetivo táctil en la pantalla.
6. screenY: screenX: La coordenada x del objetivo táctil en la pantalla.
7. identificador: una identificación única que identifica el toque.
8. objetivo: pantallaX: la coordenada x del objetivo táctil en la pantalla.

Ahora que comprende las características de los eventos táctiles, comencemos la apasionante sesión práctica.

Usemos eventos táctiles para implementar una barra de progreso deslizante en el lado móvil.

Primero diseñemos el HTML

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

Parte CSS omitida aquí

Obtenga el elemento dom e inicialice el punto de inicio táctil y la distancia entre el botón y la parte más a la izquierda del contenedor.

 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

Escuche el evento de inicio táctil

 ProgressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // Obtener la posición inicial del toque btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // Ignora la compatibilidad del navegador IE aquí})

Escuche los eventos de movimiento táctil

 ProgressBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // Calcula la distancia modificada por la diferencia entre la posición actual y la inicial position let btnLeftStyle = btnLeft + diffX // Definir un nuevo valor izquierdo para el botón touch.target.style.left = btnLeftStyle + 'px' Progress.style.width = (btnLeftStyle / ProgressWrapperWidth) * 100 + '%' // Calcula el porcentaje de longitud de la barra de progreso a través de la relación entre el valor izquierdo del botón y la longitud del contenedor de la barra de progreso})

A través de una serie de operaciones lógicas, nuestra barra de progreso se implementó básicamente, pero se descubrió un problema cuando la posición táctil excede el contenedor de la barra de progreso, se producirán algunas restricciones.

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

Hasta ahora, se ha implementado una barra de desplazamiento móvil simple.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.