Usted y sus usuarios quieren aplicaciones web móviles que reaccionen y se desplacen sin problemas a la táctil. Desarrollarlas debería ser fácil, pero, lamentablemente, cómo la Web móvil los navegadores reaccionan a los eventos táctiles durante el desplazamiento se deja como una implementación en la especificación de TouchEvent. Como Como resultado, los enfoques se pueden dividir, aproximadamente, en 4 categorías. Esta expone una tensión fundamental entre la entrega de fluidez del desplazamiento y mantener el control de los desarrolladores.
¿Cuatro modelos diferentes de procesamiento de eventos táctiles?
Las diferencias de comportamiento entre los navegadores se dividen en cuatro modelos.
Procesamiento síncrono normal de eventos
Los eventos Touchmove se envían durante el desplazamiento y cada actualización de desplazamiento se bloquea hasta que se complete el control de touchmove. Es la más sencilla de entender y la más poderosa, pero mala para el rendimiento del desplazamiento, porque significa que cada fotograma durante el desplazamiento debe bloquearse en el subproceso principal.
Navegadores: Navegador de Android (Android 4.0.4, 4.3), Mobile Safari (cuando el usuario se desplaza por la pantalla div)
Procesamiento asíncrono de touchmove
Los eventos Touchmove se envían durante el desplazamiento, pero este puede realizarse de forma asíncrona (el evento touchmove se ignora una vez que comienza el desplazamiento). Esto puede dar como resultado un "control doble" de eventos, por ejemplo, si continúa desplazándose después de que el sitio web realice alguna acción con la función touchmove y llama a preventDefault en el evento para indicarle al navegador que no lo controle.
Navegadores: Safari para dispositivos móviles (cuando se desplaza por un documento), Firefox
Se suprimió Touchmove durante el desplazamiento
Los eventos Touchmove no se envían después de que comienza el desplazamiento y no se reanudan hasta después del evento de toque final. En este modelo, es difícil diferenciar entre un toque fijo y un desplazamiento.
Navegadores: Navegador Samsung (se enviaron eventos del mouse)
Touchcancel al inicio del desplazamiento
No puedes tener ambas direcciones (suavidad de desplazamiento y control del desarrollador), y este modelo aclara la compensación entre el desplazamiento fluido y el control de eventos, similar a la semántica de la especificación de Eventos de puntero. No es posible realizar algunas experiencias que requieran el seguimiento del dedo, como deslizar hacia abajo para actualizar.
Navegadores: Chrome Desktop M32 y versiones posteriores, Chrome Android
¿Por qué cambiar?
Actualmente, Chrome para Android usa el modelo anterior de Chrome: touchcancel al desplazar. lo que mejora el rendimiento del desplazamiento, pero lleva a la confusión de los desarrolladores. En particular, algunos desarrolladores no conocen el evento touchcancel ni cómo lidiar con ello y esto ha provocado que algunos sitios web fallen. Más importante aún, un toda clase de efectos y comportamientos de desplazamiento de la IU, como extraer para actualizar Las barras ocultas y los puntos de ajuste son difíciles o imposibles de implementar. en la nube.
En lugar de agregar funciones codificadas específicamente para admitir estos efectos, Chrome busca enfocarse en agregar primitivas de plataforma que les permitan a los desarrolladores para implementar estos efectos directamente. Consulta Una plataforma web racional para hacer una exposición general de esta filosofía.
El nuevo modelo de Chrome: el modelo de Touchmove asíncrono y regulada
Chrome presenta un nuevo comportamiento
diseñados para mejorar la compatibilidad con código escrito para otros navegadores cuando
de la pantalla, además de habilitar otras situaciones que dependen de la acción de touchmove
eventos mientras te desplazas. Esta función está habilitada de forma predeterminada y puedes activarla
con la siguiente marca, chrome://flags\#touch-scrolling-mode.
El nuevo comportamiento es el siguiente:
- El primer touchmove se envía de forma síncrona para permitir que el desplazamiento se cancelado
- Durante el desplazamiento activo
- Los eventos touchmove se envían de forma asíncrona.
- limitado a 1 evento cada 200 ms, o si una región inclinada de CSS de 15 px se superó
- Event.cancelable es false
- De lo contrario, los eventos touchmove se activan de forma síncrona como de costumbre cuando el desplazamiento está activo. finaliza o no es posible porque se alcanzó el límite de desplazamiento.
- Un evento de finalización de contacto siempre ocurre cuando el usuario levanta el dedo.
Puedes probar esta demostración en Chrome para Android y activar o desactivar la
chrome://flags\#touch-scrolling-mode para ver la diferencia.
Envíanos tu opinión
El modelo asíncrono de Touchmove tiene el potencial de mejorar la experiencia entre navegadores compatibilidad y habilitar una nueva clase de efectos de gestos táctiles. Nos interesa escuchar lo que piensan los desarrolladores y ver las cosas creativas que puedes hacer con él.