Página Inicial>Tutorial de web design>Tutorial HTML

Implementação de evento de toque HTML5 para determinar a direção do deslizamento

Autor：Eve Cole Data da Última Atualização：2025-03-23 02:00:02

Para fornecer um forte suporte para interfaces sensíveis ao toque, os eventos de toque fornecem a capacidade de responder às operações do usuário na tela sensível ao toque ou no touch pad.

interface

Evento de toque

TouchEvent é um tipo de evento que descreve as mudanças de estado dos dedos na superfície de toque (tela sensível ao toque, touch pad, etc.). Este tipo de evento é usado para descrever um ou mais pontos de contato, permitindo aos desenvolvedores detectar o movimento dos pontos de contato, o aumento e a diminuição dos pontos de contato, etc. Cada objeto Touch representa um ponto de toque; cada ponto de toque é descrito por sua posição, tamanho, forma, nível de pressão e elemento alvo. Um objeto TouchList representa uma lista de vários pontos de contato.

Tipo de evento de toque

Para distinguir entre alterações de estado relacionadas ao toque, existem vários tipos de eventos de toque. Você pode determinar o tipo do evento atual verificando a propriedade TouchEvent.type do evento de toque.

  1. touchstart: acionado quando o usuário coloca um ponto de toque na superfície de toque.
  2. touchend: acionado quando um ponto de toque é removido da superfície de toque pelo usuário (quando o usuário levanta um dedo da superfície de toque).
  3. touchmove: acionado quando o usuário move um ponto de contato na superfície de toque.
  4. touchcancel: Disparado quando o contato é interrompido por algum motivo.
Determinar a direção do deslizamento

O princípio básico é registrar as posições das coordenadas do deslizamento inicial (touchStart) e do deslizamento final (touchEnd) e, em seguida, calcular a posição relativa. 

 touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; isto;endX = e.changedTouches[0].pageX; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; (direção) { case 0: console.log (sem deslizamento); case 1: console.log (acima); 3: console.log(esquerda); break; case 4: console.log(direita); break; ponto: Esquerda, 4: Direita, 0: Não deslizando GetSlideDirection:function (startX, startY, endX, endY) { const that = this; 0; //Se a distância de deslizamento for muito curta if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result } let angle = that.GetSlideAngle(dx, dy); ângulo > = -45 && ângulo < 45) { resultado = 4 }else if (ângulo >= 45 && ângulo < 135) { resultado = 1 }else if (ângulo >= -135 && ângulo <-45) { resultado = 2 } else if ((ângulo >= 135 && ângulo <= 180) || (ângulo >= -180 && ângulo < -135)) { resultado = 3 } return result; }, //Retorna o ângulo GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI };
Método JS nativo

Além dos novos métodos em H5, você também pode usar JS nativo para determinar a direção de deslizamento da visualização. O código é o seguinte (pode ser executado diretamente):

Deve-se observar que o Chrome sempre definiu document.body.scrollTop como 0 e precisa ser alterado para document.documentElement.scrollTop. 

 <!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { borda: 1px sólido preto; : 100px; overflow: scroll; } </style></head><body style=overflow: scroll><h1>Olá palavra</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1> <h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra palavra</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1> <h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra palavra</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1> <h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra palavra</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1> <h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra</h1><h1>Olá palavra palavra</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1> <h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><h1>palavra Olá</h1><script> função scroll(fn) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || function() {}; .documentElement.scrollTop, delta = afterScrollTop - beforeScrollTop; console.log('beforeScrollTop',beforeScrollTop); console.log('afterScrollTop',afterScrollTop); if(delta === 0 ) return false; false); } scroll(function(direção) { console.log(direção) });</script></body></html>

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.

Artigos Relacionados