La propiedad touch-action de CSS permite a un desarrollador restringir la forma en que un usuario puede interactuar con un elemento, lo que es muy ú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 desplazamientos laterales y desplazamientos laterales (centro y derecha).
El CSS para las presentaciones en pantalla de la mano 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 de comportamiento sutil, pero importante.
Estas propiedades obligan al usuario a iniciar gestos en una dirección antes de que el elemento responda. Esto es similar al gesto de "deslizar hacia abajo 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 el gesto ha comenzado, puedes hacer un desplazamiento lateral y viceversa. Solo se ve afectada la dirección inicial.
Si bien en el video se demuestra este comportamiento, es posible que te resulte más fácil probarlo. 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 la acción táctil 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 lateral (es decir, pan-x, pan-y, pan-left, pan-right, pan-down y pan-up).
Si pellizcas un sitio web, por lo general, se acerca el contenido de las páginas.
Si defines un touch-action, se evitará este comportamiento, pero agregar el zoom para pellizcar volverá a habilitar este comportamiento.
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 lo contrario, los desarrolladores tendrían que implementar mediante pointer-events.