Identificare gesture swipe con javascript: ecco come fare

Nell’articolo di oggi vediamo come identificare le gesture swipe con javascript vanilla, senza plugin o altre librerie. Potrebbe risultare molto utile sopratutto oggi che il lo sviluppo mobile è diventato predominante rispetto a quello desktop.

Per identificare lo swipe mobile (o le gesture in genere) esistono svariati plugin o metodi. Il più famoso è sicuramente Touch Swipe che usa le librerie jQuery come dipendenza (e questo ahimè è un grosso limite). Ma se volessimo aggiungere un controllo swipe utilizzando js “puro” senza plugin o altre dipendenze?

Codice per gesture swipe con javascript vanilla

document.addEventListener('touchstart', handleTouchStart, false); //bind & fire - evento di inizio tocco
document.addEventListener('touchmove', handleTouchMove, false); // bind & fire - evento di movimento durante il tocco
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    } //nessun movimento
    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;
    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*Trovo quello più significativo sulle assi X e Y*/
        if ( xDiff > 0 ) {

            /* swipe sinistra */
            console.log("Swipe SINISTRA");

 
        } else {
            /* swipe destra */
            console.log("Swipe DESTRA");

        }//right
    } else {
        if ( yDiff > 0 ) {

            /* swipe alto */
            console.log("Swipe ALTO");

        } else {

            /* swipe basso */
            console.log("Swipe BASSO");

        }
    }
    /* reset values */
    xDown = null;
    yDown = null;
};
//Gesture

Come sempre vi invito a visionare i commenti al codice per un tutorial passo-passo.

Il codice è pronto all’uso e può essere incollato ovunque, anche su progetti senza jQuery o altre librerie installate.

Se volete fare debug e verificarne il funzionamento, una volta incollato in pagina all’interno di appositi tag script, andando su ispeziona elemento -> Toggle Device (per simulare un dispositivo touch ready, altrimenti non funziona su Desktop!).

Dopodichè simulate lo swipe con il mouse e vedrete nella scheda CONSOLE tutto il debug 😉

Vuoi sviluppare le tue app o adattare il tuo sito all’universo mobile? Contattami senza impegno.

Questo articolo ti è stato utile? Condividilo oppure leggi altre guide javascript