Hace ya más de un año hablamos, medio en cachondeo, sobre los nuevos eventos DOM de los nuevos dispositivos multitáctiles, como el iPhone o iPod Touch. En aquel artículo divagaba con un compañero de trabajo de la posibilidad de controlar estos eventos desde Javascript para así ampliar las opciones de las aplicaciones web para estos dispositivos.
Pues ya son una realidad, gracias a las opciones que la gente de Apple nos pone a nuestra disposición, podemos gestionar estos eventos fácilmente.
// Inicio del evento Touch
document.addEventListener('touchstart', function(e) {}, false);
// Durante el evento Touch
document.addEventListener('touchmove', function(e) {}, false);
// Termina el evento Touch
document.addEventListener('touchend', function(e){}, false);
Como podemos ver en el código anterior nos encontramos 3 nuevos eventos , ‘touchstart‘, ‘touchmove‘ y ‘touchend‘ que se encargan de gestionar los 3 estados en los que el evento provocar. Al igual que toda la gestión de eventos DOM seguimos una misma estructura:
document.addEventListener('EVENTO', ACCION, CAPTURE);
La ACCION que definimos será una función que recibirá por parámetro el elemento event con la información necesaria sobre el evento.
document.addEventListener('touchstart', function(e) {
// Posición inicial del evento touch
var touch = e.touches[0];
// Posición X
pageX = touch.pageX;
// Posición Y
pageY = touch.pageY;
}, false);
Para repescar la información del evento debemos usar el array de touches en el que encontraremos la información necesaria para conocer la posición, inicial en este caso, de nuestro movimiento. Los atributos pageX y pageY nos dan las coordenadas X,Y de nuestro dedo en la pantalla.
Conociendo esto podemos hacer un pequeño experimento:
// Valores iniciales
var pageX = pageY = 0;
// Sensibilidad en pixels
var sensibilidad = 10;
// Evento START
document.addEventListener('touchstart', function(e) {
// Posición inicial del evento touch
var touch = e.touches[0];
// Posición X
pageX = touch.pageX;
// Posición Y
pageY = touch.pageY;
}, false);
// Evento MOVE
document.addEventListener('touchmove', function(e) {
// Evitamos que se mueva la página
e.preventDefault();
var touch = e.touches[0];
// Variación de la posición Y
var Y = pageY - touch.pageY;
// Variación de la posición X
var X = pageX - touch.pageX;
// Dirección Y
if (Y < sensibilidad) dirY = 'abajo';
else if (Y > sensibilidad) dirY = 'arriba';
else dirY = 'centro';
//Dirección X
if (X < sensibilidad) dirX = 'derecha';
else if (X > sensibilidad) dirX = 'izquierda';
else dirX = 'centro';
document.getElementById("info").innerHTML = '<h2>' +dirY+ " " + dirX + '</h2>';
}, false);
// Evento END
document.addEventListener('touchend', function(e){return;}, false); // No hacemos nada
Si tienes un iPhone o un iPod Touch puedes verlo funcionando en un ejemplo que he montado en 2 minutos.
(Aunque se borrará al reinciar el dispositivo)
