Eventos táctiles

Cuando empezamos a utilizar los eventos táctiles o de contacto, lo primero que queremos es una equivalencia entre estos y los eventos del ratón. No es tan sencillo. Por ejemplo podemos pensar que existe una equivalencia entre mousemove y touchmove, pero no es así. Aunque muy parecidos, los dos eventos son ligeramente distintos ya que los eventos táctiles afectan siempre al elemento de contacto, mientras que los eventos del ratón afectan al elemento situado debajo del cursor.

En lo que concierne a los eventos táctiles, estos se almacenan en el array touches, dado que podemos tocar la pantalla en varios puntos a la vez. Por ejemplo si en los eventos del ratón tenemos:

event.clientX

en los eventos táctiles tenemos

event.touches[0].clientX

Un caso práctico.

Podemos utilizar el canvas de HTML5 para dibujar a mano alzada, y este ejemplo explica como hacerlo utilizando eventos del ratón. Para que funcione también en dispositivos que utilizan eventos táctiles tenemos que reescribir la función oMousePos() para que tome en consideración también los eventos táctiles. Esta es la línea de código que obra el milagro:

var e = evt.touches ? evt.touches[0] : evt;


function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();  
  var e = evt.touches ? evt.touches[0] : evt;
    return {
      x: Math.round(e.clientX - ClientRect.left),
      y: Math.round(e.clientY - ClientRect.top)
    };
}

A continuación creamos tres funciones:

1. La función onStart que llamamos al presionar el botón del ratón ( mousedown ) o cuando tocamos la pantalla ( touchstart )


function onStart(evt){
  //derecta la posición del ratóm o la posición de contacto
    m = oMousePos(canvas, evt);
    //podemos a dibujar
    dibujando = true;
    //empezamos a dibujar
    ctx.beginPath();
}

2. La función onMove que llamamos cuando movemos el ratón ( mousemove ) o el dedo ( touchmove ).


function onMove(evt){
    if(dibujando){//si podemos a dibujar
    //movemos el lápiz a la posición anterior del ratón o de contacto
    ctx.moveTo(m.x,m.y);
    //detectamos la nueva posición
    m = oMousePos(canvas, evt);
    // dibujamos una línea
    ctx.lineTo(m.x,m.y); 
    ctx.stroke();
    }
}

3. La función onEnd para cuando soltamos el botón del ratón ( mouseup ) o levantamos el dedo ( touchEnd ).


function onEnd(evt){
    // ya no podemos dibujar
    dibujando = false;
  }

Luego para hacerlo más eficiente creamos el array de los eventos de esta manera: a cada evento le corresponde una función.


var eventsRy = [{event:"mousedown",func:"onStart"}, 
                {event:"touchstart",func:"onStart"},
                {event:"mousemove",func:"onMove"},
                {event:"touchmove",func:"onMove"},
                {event:"mouseup",func:"onEnd"},
                {event:"touchend",func:"onEnd"},
                {event:"mouseout",func:"onEnd"}
               ];

Dos detalles más:

1. para poder invocar addEventListener dentro de un bucle for necesitamos utilizar una función anónima auto-ejecutable. Por ejemplo:

  for (var i = 0; i < n; i++) {
        (function(i) {
           elemento[i].addEventListener(. . . .);
        })(i);
  }

Para más información lea esta respuesta en Stackoverflow

2. para llamar una función cuyo nombre esta generado dinámicamente ( teniendo en cuenta que todas las funciones pertenecen al objeto window ), utilizamos esta sintaxis:

window[ nombreGeneradoDinamicamente ](argumentos);

Veamos el código:


   //para cada uno de los elementos del array eventsRy
  for (var i = 0; i < eventsRy.length; i++) {
    (function(i) { // para poder invocar addEventListener dentro de un bucle for necesitamos utilizar  una función anónima auto-ejecutable
        var e = eventsRy[i].event; //el evento
        var f = eventsRy[i].func;    // el nombre de la función que le corresponde
         // registramos un event listener en el canvas
        canvas.addEventListener(e, function(evt) {
                //para prevenir el desplazamiento de pantalla
                evt.preventDefault();
                // llama la función correspondiente
                window[f](evt);
                return;
            },false
        );
  })(i);
  }

Vea este ejemplo en codepen:

See the Pen mouse & touch events by Gabi (@enxaneta) on CodePen.

Eventos táctiles en el ordenador

Para trabajar fácilmente con eventos táctiles seria útil poder abrirlo en consola. Google Chrome nos lo pone fácil:

eventos tactiles

Para más información lea Ventanas de visualización receptivas de pruebas y específicas del dispositivo

w3.unpo<code>todo