Este es un artículo rápido y pequeño que te ayudará a saber, al menos, los gestos hechos con los dedos en tu sitio web, así que no espereis demasiado.
Lo primero a tener en cuenta es que la incorporación de los eventos de toque en Javascript (a pelo, vanilla) se esta incorporando como estandar en los navegadores actuales. Así que tenedlo en cuenta en vuestros proyectos.
Para saber, si un elemento esta siendo «tocado» o «swipeado» o se esta realizando un gesto encima de el de forma rápida, lo primero que hay que hacer es agregar un evento al DOM donde queramos comprobarlo. Esta «pieza» del DOM puede ser el documento entero (document) o una parte de el que queramos, lo que nos da la libertad de crear eventos y gestos diferentes para diferentes zonas de nuestra web. Los eventos a añadir en Javascript (recomendado para empezar) es «touchstart» y «touchend».
En este ejemplo, veremos eventos de toque con un dedo:
[code]
// Inicialize the variables
var touchStartX = 0;
var touchStartY = 0;
var touchEndX = 0;
var touchEndY = 0;
// Find the element if needed
var zoneTouched = document.querySelectorAll(‘.element’);
// CAUTION HERE
// CAUTION HERE READ MORE
// CAUTION HERE
// Add the event
zoneTouched[0].addEventListener(‘touchstart’, function(event) {
// Change the variables (start)
touchStartX = event.changedTouches[0].screenX;
touchStartY = event.changedTouches[0].screenY;
});
zoneTouched[0].addEventListener(‘touchend’, function(event)
// Change the needed variables (end)
touchEndX = event.changedTouches[0].screenX;
touchEndY = event.changedTouches[0].screenY;
// Do the action
WhatImustDo();
});
[/code]
Como veis en el código superior el workflow es muy sencillo:
1. Creamos las variables necesarias, globales, principalmente en nuestro caso las posiciones iniciales y finales en los dos ejes.
2. Encontramos el elemento o los elementos donde ubicar el evento. Recuerda esto, y esta es la «precaución»: si el elemento es múltiple, recuerda que querySelectorAll devuelve una matriz, por eso coloco el índice [0], para referir el primero de la matriz. Si se utiliza el elemento getElementbyID este nos retorna un unico elemento, por lo que no hay que hacer referencia al indice (obviamente).
3. Crear los eventos con el código que queramos.
La notación en nuestro ejemplo es la larga para que se entienda pero no os cortéis en usar ES2016 o incluso ES2017.
El caso es que como veis en nuestro caso nos basamos, como hemos dicho, en touchstart y touchend.
Touchstart, es el evento que se dispara cuando el primer dedo (o si se hace con un lapicero, cuando este) toca la pantalla sobre el elemento.
Touchend, se dispara cuando el ultimo dedo o cuando se levanta el lapicero, es decir cuando se termina de tocar la pantalla sobre el elemento al que hace referencia.
Independientemente de lo que tengas que hacer con el componente, debes hacerlo al final, no al principio, por lo que, por ejemplo, si desea mover el elemento en la pantalla, debe hacerlo en el evento touchend. En mi caso, es la función WhatImustDo.
[code]
function WhatImustDo() {
// Put a mensage in the console
if (touchEndX < touchStartX) { console.log(‘you moved left’); } if (touchEndX > touchStartX) {
console.log(‘you moved right’);
}
if (touchEndY < touchStartY) { console.log(‘you moved down’); } if (touchEndY > touchStartY) {
console.log(‘you moved up’);
}
if (touchEndY == touchStartY & touchEndX == touchStartX) {
console.log(‘you tapped the screen’);
}
}
[/code]
Si os habéis fijado en la anterior función, otra cosa que debes notar es que la forma de saber (en este caso) la posición es llamando a la parte changedTouches. Esta propiedad le dirá todo lo que necesita para manejar el toque pero lo más importante es saber que se trata de una matriz con el número del dedo.
0 es el primer dedo, 1 es el segundo dedo, 2 es el tercer dedo y así sucesivamente… por lo que puede crear diferentes comportamientos de acuerdo con la cantidad de dedos y lo que hacen en la pantalla.
La ultima función (WhatMustIDo) simplemente muestra en la consola hacia donde has movido, dentro del elemento, el dedo descartando el resto. Poco hay que comentar aqui.
Y por último, pero no menos importante es activar el preventDefault para evitar las acciones que la aplicacion ha impuesto a la página como, por ejemplo, el retroceder o avanzar en el historial cuando se desliza hacia la derecha o izquierda. Vamos, parar el comportamiento básico.
Con este pequeño post sobre gestos en su página web puede controlar y crear gestos necesarios de una manera fácil y en JS vanilla, recuerde, es más rápido que hacerlo con bibliotecas y no dependeras de terceros si quieres crear gestos personalizados dándote más libertad para crear nuevos gestos específicos.
