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:
Para más información lea Ventanas de visualización receptivas de pruebas y específicas del dispositivo