La propiedad CSS touch-action permite que un desarrollador restrinja la forma en que un usuario puede interactuar con un elemento, lo que es especialmente útil para evitar que se envíen eventos cuando no es necesario.
Antes de la versión 55, Chrome admitía pan-x y pan-y, que restringen los elementos para que se desplacen en una dirección.
En el siguiente video, se muestra un ejemplo de un elemento sin una acción táctil definida (izquierda), así como pan-x y pan-y (centro y derecha).
El CSS para las transmisiones de pantalla del medio y la derecha es el siguiente:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
En Chrome 55, se agregaron pan-left, pan-right, pan-up y pan-down. Estas propiedades tienen una diferencia sutil, pero importante, en el comportamiento.
Estas propiedades obligan al usuario a iniciar gestos en una dirección antes de que el elemento responda. Esto es similar al gesto "deslizar para actualizar", que solo responde cuando el usuario hace un gesto hacia abajo en la pantalla.
En el siguiente video, se muestran pan-right y pan-down, que requieren gestos para comenzar de derecha a izquierda y de abajo hacia arriba, respectivamente.
Una vez que se inicia el gesto, puedes desplazarte hacia adelante y hacia atrás. Solo se ve afectada la dirección inicial.
Si bien el video demuestra este comportamiento, es posible que te resulte más fácil probarlo por tu cuenta. Para ello, consulta la muestra.
El CSS de esta demostración es el siguiente:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Lo último que sucede en el mundo de las acciones táctiles es la
propiedad pinch-zoom. Esta es una propiedad nueva en Chrome 55, detrás de una marca, que se puede usar con cualquiera de las opciones de desplazamiento (es decir, pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Si pellizcas un sitio web, por lo general, se acercará el contenido de la página.
Definir un touch-action evitará este comportamiento, pero agregar el gesto de pellizcar para acercar volverá a habilitarlo.
En este video, se muestra la diferencia entre touch-action: pan-x y touch-action: pan-x pinch-zoom.
Todas estas propiedades deberían simplificar parte de la lógica que, de otro modo, los desarrolladores deberían implementar con pointer-events.