¡Eventos deslizantes de pantalla táctil móvil, monitoreo de eventos de pantalla táctil deslizante!

1. Eventos táctiles

ontouchstart, ontouchmove, ontouchend, ontouchcancel

Actualmente, los navegadores móviles admiten estos 4 eventos táctiles, incluido IE. Dado que las pantallas táctiles también admiten MouseEvent, es necesario tener en cuenta su orden: touchstart → mouseover → mousemove → mousedown → mouseup → click1

Apple introdujo la API de eventos táctiles en iOS 2.0, y Android se está poniendo al día con esta De normas de facto para reducir la brecha. Recientemente, un grupo de trabajo del W3C está trabajando en conjunto para desarrollar esta especificación de evento táctil.

2. Especificaciones

Aquí presentamos varios eventos táctiles populares. Puede probar este evento en la mayoría de los navegadores modernos (debe ser un dispositivo con pantalla táctil):

touchstart: Se activa cuando comienza el toque

touchmove: Se activa cuando el dedo se desliza en la pantalla

touchend: Se activa cuando finaliza el toque

Cada evento táctil incluye tres Listas táctiles, cada lista contiene una serie correspondiente de puntos táctiles (utilizados para implementar multitáctiles):

toques: una lista de todos los dedos actualmente en la pantalla.

targetTouches: una lista de dedos ubicados en el elemento DOM actual.

changeTouches: una lista de dedos involucrados en el evento actual.

Cada punto de contacto contiene la siguiente información táctil (de uso común):

identificador: un valor numérico que identifica de forma única el dedo actual en la sesión táctil. Generalmente es un número de serie que comienza desde 0 (android4.1, uc)

Objetivo: elemento DOM, que es el objetivo de la acción.

pageX / pageX / clientX / clientY/screenX/screenY: un valor, la posición en la pantalla donde ocurre la acción (la página incluye la distancia de desplazamiento, el cliente no incluye la distancia de desplazamiento y la pantalla se basa en la pantalla).

radioX / radioY /ángulo de rotación: Dibuja una elipse aproximadamente equivalente a la forma de un dedo, con los dos radios y ángulos de rotación de la elipse respectivamente. El navegador de prueba preliminar no lo admite. Afortunadamente, la función no se usa comúnmente. Se agradecen los comentarios.

Con esta información, podemos proporcionar diferentes comentarios a los usuarios en función de la información de este evento.

A continuación, les mostraré una pequeña demostración en la que usamos touchmove para realizar el arrastre con un solo dedo:

3. Eventos de gestos

Los gestos se refieren al uso de Haga clic múltiple para realizar operaciones como rotación y estiramiento, como ampliar y rotar imágenes y páginas web. Los eventos de gestos se activan sólo cuando dos o más dedos se tocan al mismo tiempo. Una cosa a la que debemos prestar atención sobre la escala son las coordenadas de posición del elemento: generalmente usamos offsetX, getBoundingClientRect y otros métodos para obtener las coordenadas de posición del elemento. Sin embargo, en los navegadores móviles, la página a menudo se escala durante el uso. y las coordenadas del elemento escalado cambiarán. La respuesta es que varía. Usemos un escenario para ilustrar este problema: después de cargar la página A, JavaScript obtiene las coordenadas del elemento en el documento como (100,100) y luego el usuario hace zoom en la página. En este momento, se usa JavaScript para generar la página. coordenadas del elemento nuevamente, que sigue siendo (100,100). Sin embargo, el área de respuesta del elemento en la pantalla se compensará según la escala.

Puedes abrir la demostración del juego Brick Breaker, esperar hasta que la página esté completamente cargada y luego hacer zoom. En este momento, encontrarás que incluso si tu dedo toca fuera del área "tocar aquí", aún puedes controlar el juego. tablero de pelota porque el área está compensada. El desplazamiento persistirá a menos que se actualice la página o se reanude el escalado.

4. Detección de gravedad

La detección de gravedad es relativamente simple. Solo necesita agregar el evento onorientationchange al nodo del cuerpo. En este caso, el valor que representa la orientación actual del teléfono móvil se obtiene de la propiedad window.orientation. La lista de valores de window.orientation es la siguiente:

0: Igual que la orientación cuando se cargó la página por primera vez

-90: Girado 90° en el sentido de las agujas del reloj con respecto a la dirección original

180: girado 180°

90: girado 90° en sentido antihorario Según mi prueba, Android 2.1 aún no admite la detección de gravedad. Los anteriores son los eventos de pantalla táctil actuales. Estos eventos aún no se han incorporado al estándar, pero ya se utilizan ampliamente. Tengo Android 2.1 y no lo he probado en otros entornos.