Para brindar un soporte sólido para las interfaces táctiles, los eventos táctiles brindan la capacidad de responder a las operaciones del usuario en la pantalla táctil o el panel táctil.
interfaz Evento táctilTouchEvent es un tipo de evento que describe los cambios de estado de los dedos en la superficie táctil (pantalla táctil, panel táctil, etc.). Este tipo de evento se utiliza para describir uno o más puntos de contacto, lo que permite a los desarrolladores detectar el movimiento de los puntos de contacto, el aumento y la disminución de los puntos de contacto, etc. Cada objeto táctil representa un punto de contacto; cada punto de contacto se describe por su posición, tamaño, forma, nivel de presión y elemento objetivo. Un objeto TouchList representa una lista de múltiples puntos de contacto.
Tipo de evento táctilPara distinguir entre los cambios de estado relacionados con el tacto, existen varios tipos de eventos táctiles. Puede determinar de qué tipo es el evento actual comprobando la propiedad TouchEvent.type del evento táctil.
El principio básico es registrar las posiciones de coordenadas del inicio del deslizamiento (touchStart) y del final del deslizamiento (touchEnd), y luego calcular la posición relativa.
touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; e = e || esto; endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; let dirección = that.GetSlideDirection(startX, startY, endX, endY); (dirección) { caso 0: console.log (sin deslizamiento); caso 1: console.log (arriba; caso 2: console.log (abajo); 3: console.log(left); break; case 4: console.log(right); default: break } },// Dirección de retorno 1: arriba, 2: abajo, 3 según el punto inicial y final; punto: Izquierda, 4: Derecha, 0: No deslizar GetSlideDirection: función (startX, startY, endX, endY) { const that = this; let dy = startY - endY; 0; // Si la distancia de deslizamiento es demasiado corta if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result } let angle = that.GetSlideAngle(dx, dy); ángulo > = -45 && ángulo < 45) { resultado = 4 }si no (ángulo >= 45 && ángulo < 135) { resultado = }si (ángulo >= -135 && ángulo < -45) { resultado = 2 } else if ((ángulo >= 135 && ángulo <= 180) || (ángulo >= -180 && ángulo < -135)) { resultado = 3 } resultado }, // Devuelve el ángulo GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI } Método JS nativoAdemás de los nuevos métodos en H5, también puede usar JS nativo para determinar la dirección de deslizamiento de la vista. El código es el siguiente (se puede ejecutar directamente):
Cabe señalar que Chrome siempre ha configurado document.body.scrollTop en 0 y debe cambiarse a document.documentElement.scrollTop.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { border: 1px solid black; : 100px; desbordamiento: desplazamiento; } </style></head><body style=overflow: desplazamiento><h1>Hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1> <h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1> <h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1> <h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1> <h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1><h1>hola palabra</h1> Función <h1>Hello palabra</h1><h1>Hello palabra</h1><h1>Hello palabra</h1><h1>Hello palabra</h1><script> 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 ) devuelve falso; false } scroll(function(dirección) { console.log(dirección) });</script></body></html>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.