Detect a finger swipe through JavaScript on the iPhone and Android

Question

How can you detect that a user swiped his finger in some direction over a web page with JavaScript?

I was wondering if there was one solution that would work for websites on both the iPhone and an Android phone.

Answer 1

Simple vanilla JS code sample:

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;                                              }; 

Tested in Android.