Descifrando la propiedad touches en JavaScript para eventos táctiles

En el desarrollo web moderno, la interacción táctil se ha convertido en una pieza fundamental para ofrecer experiencias de usuario intuitivas y atractivas, especialmente en dispositivos móviles y tablets. JavaScript, como lenguaje esencial del front-end, proporciona las herramientas necesarias para gestionar estos eventos táctiles de manera eficiente. Entre las propiedades más importantes que nos ofrecen los objetos de eventos táctiles, encontramos touches, una lista que contiene información crucial sobre todos los puntos de contacto activos en la superficie táctil.

¿Qué es exactamente la propiedad touches?

La propiedad touches es una característica de los objetos de evento táctil en JavaScript, como touchstart, touchmove y touchend. Se define como una TouchList de solo lectura. Esta TouchList no es simplemente una lista cualquiera; contiene objetos Touch que representan cada punto de contacto que está actualmente en contacto con la superficie táctil en el momento en que se dispara el evento. Lo más importante a entender es que touches no se limita a los dedos que iniciaron el evento o a los elementos que fueron inicialmente el objetivo. Captura todos los contactos, sin importar su origen o objetivo inicial.

Imagina que estás usando una aplicación web en tu teléfono y utilizas dos dedos para hacer zoom en una imagen. Cuando se produce un evento táctil, la propiedad touches te proporcionará información sobre ambos dedos, incluso si uno de ellos se colocó en la pantalla un poco después que el otro, o si inicialmente tocaron elementos diferentes.

Desglosando la TouchList y los objetos Touch

Para comprender completamente touches, es fundamental entender qué contiene esta TouchList. Como mencionamos, contiene objetos Touch. Cada objeto Touch representa un punto de contacto individual en la superficie táctil. Estos objetos Touch no son simples marcadores; están repletos de información valiosa sobre cada contacto, incluyendo:

• identifier: Un identificador numérico único para cada punto de contacto. Este identificador permite rastrear un dedo específico a medida que se mueve por la pantalla. Es crucial para distinguir entre múltiples dedos.
• target: El elemento DOM que fue el objetivo inicial del evento táctil cuando el dedo tocó la pantalla por primera vez (en el evento touchstart). Aunque touches lista todos los contactos, cada objeto Touch recuerda el elemento inicial que capturó su primer toque.
• clientX y clientY: Las coordenadas X e Y del punto de contacto relativas al viewport del cliente (la ventana del navegador).
• pageX y pageY: Las coordenadas X e Y del punto de contacto relativas a la página HTML completa. Son útiles cuando la página tiene scroll y necesitas las coordenadas absolutas en el documento.
• screenX y screenY: Las coordenadas X e Y del punto de contacto relativas a la pantalla del dispositivo físico.
• radiusX y radiusY: El radio del elipse que mejor se ajusta al área de contacto con la superficie táctil en el eje X e Y. Útil para dispositivos que pueden detectar la forma del contacto.
• rotationAngle: El ángulo de rotación del elipse de contacto.
• force: La cantidad de presión aplicada a la superficie táctil. No todos los dispositivos soportan la detección de presión, por lo que este valor puede no estar siempre disponible.

Con toda esta información disponible en cada objeto Touch dentro de la TouchListtouches, los desarrolladores tienen un control granular sobre la interacción táctil, pudiendo crear experiencias ricas y personalizadas.

Diferenciando touches de targetTouches y changedTouches

Es importante no confundir touches con otras dos TouchList relacionadas que también se encuentran en los objetos de evento táctil: targetTouches y changedTouches. Aunque las tres son TouchList que contienen objetos Touch, su propósito y alcance son diferentes:

• touches: Como ya hemos explicado, contiene todos los puntos de contacto actualmente activos en la superficie táctil, independientemente de su origen o objetivo.
• targetTouches: Contiene solo los puntos de contacto que se iniciaron en el mismo elemento DOM que es el objetivo del evento actual. Si tienes varios dedos en la pantalla, pero solo algunos comenzaron su interacción en el elemento que está escuchando el evento, targetTouches solo incluirá esos contactos.
• changedTouches: Contiene solo los puntos de contacto cuyo estado ha cambiado desde el último evento táctil. Por ejemplo, en un evento touchmove, changedTouches solo incluirá los dedos que se han movido desde el último evento touchmove o touchstart. En un evento touchend, changedTouches contendrá los dedos que se levantaron de la pantalla.

Para clarificar las diferencias, veamos una tabla comparativa:

Casos de uso de la propiedad touches

La propiedad touches es extremadamente útil en una variedad de escenarios de desarrollo web interactivo. Algunos ejemplos comunes incluyen:

• Gestos multi-táctiles:touches es esencial para implementar gestos complejos como zoom con dos dedos (pinch-to-zoom), rotación con dos dedos, o gestos con tres o más dedos. Al analizar la TouchList, puedes determinar cuántos dedos están en la pantalla y sus posiciones relativas para interpretar la intención del usuario y ejecutar la acción correspondiente.
• Aplicaciones de dibujo y pintura: En aplicaciones de dibujo o pintura digital, touches permite rastrear múltiples trazos simultáneamente. Cada objeto Touch en la lista puede representar un pincel diferente, permitiendo una experiencia de dibujo más rica y expresiva.
• Juegos táctiles: Muchos juegos táctiles requieren la gestión de múltiples puntos de contacto para controles complejos, como mover un personaje con un dedo mientras se dispara con otro. touches facilita la implementación de estos controles multi-táctiles.
• Interfaces de usuario interactivas: Para crear interfaces de usuario altamente interactivas, como controles deslizantes multi-punto o manipuladores que responden a múltiples dedos, touches proporciona la base para rastrear y reaccionar a cada punto de contacto individualmente.

Preguntas Frecuentes sobre la propiedad touches

¿La propiedad touches funciona en todos los navegadores?

La compatibilidad con eventos táctiles, incluyendo la propiedad touches, es amplia en navegadores modernos, especialmente en dispositivos móviles y tablets. Sin embargo, la compatibilidad puede variar ligeramente entre navegadores de escritorio y dispositivos más antiguos. Es recomendable realizar pruebas en diferentes navegadores y dispositivos para asegurar la compatibilidad deseada.

¿Cómo puedo obtener el número de dedos que están tocando la pantalla?

Puedes obtener el número de dedos actualmente en la pantalla accediendo a la propiedad length de la TouchListtouches. Por ejemplo: evento.touches.length te dará el número de objetos Touch en la lista, que corresponde al número de dedos.

¿Puedo modificar la TouchListtouches?

No, la propiedad touches es de solo lectura. No puedes añadir, eliminar o modificar directamente los objetos Touch dentro de la TouchList.

¿En qué tipo de eventos táctiles está disponible la propiedad touches?

La propiedad touches está disponible en los eventos táctiles primarios: touchstart, touchmove, touchend y touchcancel.

Conclusión

La propiedad touches es una herramienta poderosa y fundamental en el desarrollo web para la interacción táctil. Al proporcionar una lista completa de todos los puntos de contacto activos, permite a los desarrolladores crear experiencias de usuario ricas, interactivas y multi-táctiles. Comprender cómo funciona touches, su relación con targetTouches y changedTouches, y la información detallada que ofrecen los objetos Touch, es esencial para aprovechar al máximo las capacidades táctiles de la web moderna y construir aplicaciones que respondan de manera intuitiva a las interacciones de los usuarios en dispositivos táctiles.