Método de implementação de evento de toque HTML5 para implementar uma barra de progresso simples no terminal móvel

Muitos eventos novos foram adicionados ao HTML, mas devido a problemas de compatibilidade, muitos eventos não são amplamente utilizados. A seguir, apresentaremos alguns eventos de toque móveis úteis: touchstart, touchmove, touchend.

Vamos apresentar brevemente esses eventos:

1. touchstart: Acionado quando um dedo toca a tela, mesmo que já exista um dedo na tela.
2. touchmove: Acionado continuamente quando o dedo desliza na tela. Durante esse evento, chamar o evento preventDefault() pode impedir a rolagem.
3. touchend: acionado quando o dedo sai da tela.

Esses eventos de toque têm propriedades de domínio comuns. Além disso, eles contêm três propriedades para rastrear toques:

1. touches: uma matriz de objetos de toque que representa as operações de toque atualmente rastreadas.
2. targetTouches: matriz de objetos Touch específicos para destinos de eventos.
3. changeTouches: uma matriz de objetos Touch que representa o que mudou desde o último toque.

Cada objeto de toque contém as seguintes propriedades:

1. clientX: a coordenada x do alvo de toque na janela de visualização.
2. clientY: a coordenada y do alvo de toque na janela de visualização.
3. pageX: a coordenada x do alvo de toque na página.
4. pageY: a coordenada y do alvo de toque na página.
5. screenX: screenX: A coordenada x do alvo de toque na tela.
6. screenY: screenX: A coordenada x do alvo de toque na tela.
7. identificador: um ID exclusivo que identifica o toque.
8. target: screenX: A coordenada x do alvo de toque na tela.

Agora que você entende as características dos eventos de toque, vamos começar a emocionante sessão prática.

Vamos usar eventos de toque para implementar uma barra de progresso deslizante no lado móvel.

Vamos definir o HTML primeiro

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

Parte CSS omitida aqui

Obtenha o elemento dom e inicialize o ponto inicial do toque e a distância entre o botão e a parte mais à esquerda do contêiner

 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

Ouça o evento touchstart

 progressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // Obtenha a posição inicial do toque btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // Ignore a compatibilidade do navegador IE aqui})

Ouça eventos touchmove

 progressBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // Calcula a distância alterada pela diferença entre a posição atual e a inicial position let btnLeftStyle = btnLeft + diffX // Define um novo valor esquerdo para o botão touch.target.style.left = btnLeftStyle + 'px' progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // Calcula a porcentagem de comprimento da barra de progresso através da proporção entre o valor esquerdo do botão e o comprimento do contêiner da barra de progresso})

Através de uma série de operações lógicas, nossa barra de progresso foi basicamente implementada, mas um problema foi descoberto quando a posição do toque excede o contêiner da barra de progresso, vamos fazer algumas restrições.

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

Neste ponto, uma simples barra de rolagem móvel foi implementada

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.