En este artículo vamos a explicar cómo obtener los eventos táctiles o Touch Events en JavaScript, uno de los dispositivos de entrada más utilizados en la actualidad. Con el tiempo, la forma de obtener interacción con los usuarios ha evolucionado, convirtiéndose en una parte fundamental para interactuar con las aplicaciones. Este artículo tiene como objetivo explicar qué son los eventos táctiles o Touch Events, cómo funcionan y cómo usarlos en JavaScript para crear experiencias interactivas en dispositivos móviles.
En los últimos años, los dispositivos móviles han transformado la manera en que interactuamos con las interfaces digitales. Los dispositivos táctiles (como smartphones y tabletas) han desplazado en gran medida a los teclados y ratones tradicionales. Para adaptarse a esta nueva forma de interacción, los navegadores web han implementado una serie de eventos táctiles o Touch Events en JavaScript, que permiten a los desarrolladores gestionar y responder a las interacciones del usuario mediante toques en la pantalla.
¿Qué son los eventos táctiles?
En JavaScript, los eventos táctiles o Touch Events son un conjunto de eventos específicos que permiten detectar y gestionar las interacciones del usuario a través de pantallas táctiles. A diferencia de los eventos del ratón, que están basados en el clic y el movimiento del puntero, en JavaScript los eventos táctiles o Touch Events están diseñados para detectar interacciones táctiles, como el toque, el deslizamiento y el levantamiento de los dedos sobre la pantalla. Su enfoque y uso básico es similar a los Mouse Events explicados en el artículos anterior.
element.addEventListener(event, function(e), useCapture);En el caso de los Touch Events o eventos táctiles más comunes en JavaScript tenemos los siguientes:
Evento touchstart
El evento touchstart se dispara cuando un dedo toca la pantalla. Es el primer evento en la secuencia de interacción táctil. Este evento es útil para iniciar acciones cuando el usuario comienza a tocar la pantalla, como cambiar el color de un botón o iniciar una animación. Un ejemplo de uso sería el siguiente:
document.addEventListener('touchstart', function(e) {
console.log("¡Pantalla tocada!");
});Evento touchmove
El evento touchmove se activa cuando un dedo se mueve sobre la pantalla. Este evento se disparará constantemente mientras el dedo esté en movimiento, lo que lo hace ideal para manejar gestos como deslizar o arrastrar elementos. En este ejemplo, estamos mostrando las coordenadas del primer dedo tocando la pantalla (es posible que haya más de un dedo, pero event.touches[0] hace referencia al primer dedo). Un ejemplo de uso sería el siguiente:
document.addEventListener('touchmove', function(e) {
console.log("El dedo se está moviendo sobre la pantalla");
console.log(`Coordenadas: X=${e.touches[0].clientX}, Y=${e.touches[0].clientY}`);
});Evento touchend
El evento touchend se dispara cuando un dedo deja de tocar la pantalla. Es el evento final en una secuencia de interacción táctil. Este evento es útil para finalizar una acción, como hacer clic en un botón virtual o soltar un objeto que el usuario estaba arrastrando. Un ejemplo de uso sería el siguiente:
document.addEventListener('touchend', function(e) {
console.log("El dedo ha dejado de tocar la pantalla");
});Evento touchcancel
El evento touchcancel se dispara cuando la interacción táctil se interrumpe por algún motivo, como cuando el sistema detecta un evento externo (por ejemplo, una llamada entrante) o el sistema de touch termina la interacción por alguna razón. Este evento es menos frecuente, pero puede ser útil para manejar situaciones en las que un gesto táctil es interrumpido por eventos externos. Un ejemplo de uso sería el siguiente:
document.addEventListener('touchcancel', function(e) {
console.log("La interacción táctil ha sido cancelada");
});Propiedades Touch Events en JavaScript
Cuando utilizamos los Touch Events o eventos táctiles en JavaScript, cada evento táctil tiene algunas propiedades clave que nos permiten acceder a la información sobre la interacción táctil. Estas propiedades son devueltas en el objeto del evento (e) devuelto como parámetro en la función definida para el evento:
touches[i]: Un array que contiene todos los puntos de contacto actuales. Por ejemplo, si hay dos dedos tocando la pantalla,touches[0]será el primer dedo ytouches[1]será el segundo.changedTouches[i]: Similar atouches, pero contiene solo los puntos de contacto que han cambiado (es decir, los que han sido levantados o movidos).targetTouches[i]: Los puntos de contacto que están en el mismo elemento que el evento fue disparado.- Dentro de cada uno de los arrays anteriores tendremos datos similares a los eventos del ratón:
clientX,clientY: Las coordenadas del dedo en relación con la ventana del navegador (en píxeles).screenX,screenY: Las coordenadas del dedo en relación con la pantalla del dispositivo.pageX,pageY: Las coordenadas del dedo en relación con el documento completo (considerando desplazamientos de la página).radiusX,radiusY: El radio del contacto en el eje (x, y), útil si se detecta que el dedo está en una posición no completamente recta.rotationAngle: El ángulo de rotación del contacto (si el dispositivo tiene soporte para esta propiedad).identifier
Un código de ejemplo de acceso a las coordenadas del dedo sería el siguiente:
document.addEventListener('touchmove', function(e) {
var x = e.touches[0].clientX;
var y = e.touches[0].clientY;
console.log(`Coordenadas del primer dedo: X=${x}, Y=${y}`);
});Ejemplo de Touch Events en JavaScript
Vamos a ver un código de ejemplo completo para acceder a los Touch Events o eventos táctiles en JavaScript. Este ejemplo de código usa varios de los eventos táctiles o Touch Events para realizar una acción como arrastrar un objeto en la pantalla mediante JavaScript:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de eventos táctiles</title>
<style>
#movible {
top: 50px;
right: 50px;
width: 100px;
height: 100px;
font-size: 0.8em;
text-align: center;
background-color: red;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
#output {
padding: 10px;
margin-top: 20px;
background-color: #f1f1f1;
border: 1px solid #ccc;
max-width: 400px;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="movible">Arrástrame ...</div>
<div id="output">Las propiedades del evento táctil aparecerán aquí ...</div>
<script>
let movible = document.getElementById('movible');
let output = document.getElementById('output');
let startX, startY, offsetX, offsetY;
// Función para mostrar las propiedades del evento táctil en el HTML
function mostrarPropiedades(e) {
let propiedades = `
event.type: ${e.type}
touches[0].clientX: ${e.touches[0]?.clientX || 'No disponible'}
touches[0].clientY: ${e.touches[0]?.clientY || 'No disponible'}
touches[0].pageX: ${e.touches[0]?.pageX || 'No disponible'}
touches[0].pageY: ${e.touches[0]?.pageY || 'No disponible'}
touches[0].screenX: ${e.touches[0]?.screenX || 'No disponible'}
touches[0].screenY: ${e.touches[0]?.screenY || 'No disponible'}
touches[0].radiusX: ${e.touches[0]?.radiusX || 'No disponible'}
touches[0].radiusY: ${e.touches[0]?.radiusY || 'No disponible'}
touches[0].rotationAngle: ${e.touches[0]?.rotationAngle || 'No disponible'}
touches[0].identifier: ${e.touches[0]?.identifier || 'No disponible'}
changedTouches[0].clientX: ${e.changedTouches[0]?.clientX || 'No disponible'}
changedTouches[0].clientY: ${e.changedTouches[0]?.clientY || 'No disponible'}
changedTouches[0].pageX: ${e.changedTouches[0]?.pageX || 'No disponible'}
changedTouches[0].pageY: ${e.changedTouches[0]?.pageY || 'No disponible'}
changedTouches[0].screenX: ${e.changedTouches[0]?.screenX || 'No disponible'}
changedTouches[0].screenY: ${e.changedTouches[0]?.screenY || 'No disponible'}
changedTouches[0].radiusX: ${e.changedTouches[0]?.radiusX || 'No disponible'}
changedTouches[0].radiusY: ${e.changedTouches[0]?.radiusY || 'No disponible'}
changedTouches[0].rotationAngle: ${e.changedTouches[0]?.rotationAngle || 'No disponible'}
changedTouches[0].identifier: ${e.changedTouches[0]?.identifier || 'No disponible'}
targetTouches[0].clientX: ${e.targetTouches[0]?.clientX || 'No disponible'}
targetTouches[0].clientY: ${e.targetTouches[0]?.clientY || 'No disponible'}
targetTouches[0].pageX: ${e.targetTouches[0]?.pageX || 'No disponible'}
targetTouches[0].pageY: ${e.targetTouches[0]?.pageY || 'No disponible'}
targetTouches[0].screenX: ${e.targetTouches[0]?.screenX || 'No disponible'}
targetTouches[0].screenY: ${e.targetTouches[0]?.screenY || 'No disponible'}
targetTouches[0].radiusX: ${e.targetTouches[0]?.radiusX || 'No disponible'}
targetTouches[0].radiusY: ${e.targetTouches[0]?.radiusY || 'No disponible'}
targetTouches[0].rotationAngle: ${e.targetTouches[0]?.rotationAngle || 'No disponible'}
targetTouches[0].identifier: ${e.targetTouches[0]?.identifier || 'No disponible'}
altKey: ${e.altKey}
ctrlKey: ${e.ctrlKey}
metaKey: ${e.metaKey}
shiftKey: ${e.shiftKey}
pointerType: ${e.pointerType || 'No disponible'}
`;
output.textContent = propiedades;
}
// Evento touch activado
movible.addEventListener('touchstart', function (e) {
startX = e.touches[0].clientX - movible.offsetLeft;
startY = e.touches[0].clientY - movible.offsetTop;
mostrarPropiedades(e);
});
// Evento touch en movimiento
movible.addEventListener('touchmove', function (e) {
offsetX = e.touches[0].clientX - startX;
offsetY = e.touches[0].clientY - startY;
movible.style.left = offsetX + 'px';
movible.style.top = offsetY + 'px';
mostrarPropiedades(e);
});
// Evento touch finalizado
movible.addEventListener('touchend', function (e) {
mostrarPropiedades(e);
});
// Evento touch interrumpido
movible.addEventListener('touchcancel', function (e) {
alert("Interacción cancelada");
mostrarPropiedades(e);
});
</script>
</body>
</html>En este ejemplo, un elemento div de color rojo se puede arrastrar por la pantalla utilizando Touch Events o eventos táctiles con JavaScript. El touchstart guarda la posición inicial, el touchmove actualiza las coordenadas mientras el dedo se mueve y el touchend indica que el movimiento ha finalizado.
Consejos para trabajar con eventos táctiles
Cuando trabajamos con los Touch Events o eventos táctiles en JavaScript hay una serie de recomendaciones que debemos tener en cuenta:
- Evita el uso excesivo de
touchmove: El eventotouchmovese dispara muy rápidamente cuando el dedo se mueve, por lo que es importante usarlo con moderación para evitar sobrecargar el rendimiento de la aplicación. - Soporte para múltiples toques: Los eventos táctiles permiten manejar múltiples toques a la vez. Asegúrate de comprobar si
event.touchescontiene más de un punto de contacto si deseas manejar gestos multitáctiles. - Compatibilidad con dispositivos: Algunos dispositivos antiguos pueden no soportar estos eventos o tener un comportamiento diferente. Asegúrate de realizar pruebas en varios dispositivos y navegadores.
Touch Events En JavaScript
Los eventos táctiles o Touch Events en JavaScript son fundamentales para la interacción en dispositivos móviles. Al comprender y manejar correctamente estos eventos, los desarrolladores pueden crear experiencias de usuario más fluidas y naturales en pantallas táctiles. A través de eventos como touchstart, touchmove, touchend y touchcancel, podemos detectar toques, movimientos y levantamientos de dedos y responder en consecuencia.
Al tener este conocimiento sobre los Touch Events en JavaScript, puedes empezar a explorar nuevas formas de interacción en tus aplicaciones y juegos, haciendo que tu producto sea más accesible y emocionante para los usuarios móviles.
Puedes consultar la documentación oficial sobre los Touch Events en JavaScript aquí.
¡ Espero que este artículo sea de vuestro interés !