Contenido

Gestión de eventos Touch del iPhone

18 ago

+ 3

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.

  • Muy interesante (de hecho estoy comentando desde un ipod touch), pero la detección falla cuando la pantalla está horizontal. Creo que hay un atributo para sacar también la orientación de la pantalla.

    Un saludo!

  • @Croc la detección no falla cuando es horizontal, debes seguir usando la variable X. Yo no he tenido problema con eso.

    El problema que tengo es que al usar:

    var pageX = pageY = 0;
    var sensibilidad = 10;
    document.addEventListener(‘tou…..
    document.addEventListener(‘touchmove….
    document.addEventListener(‘touchen…

    me deja de funcionar el scroll normal de la página… Que puedo hacer? alguien sabe?

  • @EPROM: Esto es por la línea
    e.preventDefault();

    si comentamos esta línea volveremos a tener scroll.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.