Détecter un glissement de doigt grâce à JavaScript sur l'iPhone et Android

Question

Comment détecter qu'un utilisateur a fait glisser son doigt dans une certaine direction sur une page web avec JavaScript ?

Je me demandais s'il existait une solution qui fonctionnerait pour les sites Web sur l'iPhone et sur un téléphone Android.

Answer 1

Un simple échantillon de code JS vanille :

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     

function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    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 ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* right swipe */ 
        } else {
            /* left swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* down swipe */ 
        } else { 
            /* up swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

Testé sous Android.

Answer 2

J'ai trouvé ce plugin jquery touchwipe qui fonctionne à la fois sur mon ipod touch première génération et mon droid incredible. http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Answer 3

Avez-vous essayé hammer.js ? http://eightmedia.github.com/hammer.js/ Fonctionne également sur les téléphones Windows

Answer 4

Ce que j'ai utilisé auparavant, c'est que vous devez détecter l'événement mousedown, enregistrer sa position x,y (selon ce qui est pertinent) puis détecter l'événement mouseup, et soustraire les deux valeurs.

Answer 5

JQuery Mobile inclut également la prise en charge du balayage : http://api.jquerymobile.com/swipe/

Exemple

$("#divId").on("swipe", function(event) {
    alert("It's a swipe!");
});