Detect a Finger Swipe Through JavaScript on the Iphone and Android

Detect a finger swipe through JavaScript on the iPhone and Android

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.

How to detect swipe in JavaScript?

You can try this. Very simple and easy to understand.

  var container = document.querySelector("CLASS OR ID FOR WHERE YOU WANT TO DETECT SWIPE");

  container.addEventListener("touchstart", startTouch, false);
  container.addEventListener("touchmove", moveTouch, false);

  // Swipe Up / Down / Left / Right
  var initialX = null;
  var initialY = null;

  function startTouch(e) {
    initialX = e.touches[0].clientX;
    initialY = e.touches[0].clientY;
  };

  function moveTouch(e) {
    if (initialX === null) {
      return;
    }

    if (initialY === null) {
      return;
    }

    var currentX = e.touches[0].clientX;
    var currentY = e.touches[0].clientY;

    var diffX = initialX - currentX;
    var diffY = initialY - currentY;

    if (Math.abs(diffX) > Math.abs(diffY)) {
      // sliding horizontally
      if (diffX > 0) {
        // swiped left
        console.log("swiped left");
      } else {
        // swiped right
        console.log("swiped right");
      }  
    } else {
      // sliding vertically
      if (diffY > 0) {
        // swiped up
        console.log("swiped up");
      } else {
        // swiped down
        console.log("swiped down");
      }  
    }

    initialX = null;
    initialY = null;

    e.preventDefault();
  };

Reference:
https://www.kirupa.com/html5/detecting_touch_swipe_gestures.htm

Cordova swipe event detection options for Android, iOS and Windows tablets

You don't really need anything special to use jQuery Mobile with Cordova, just drop it in and follow the tutorial for creating your first JQM app and it will work. The thing about JQM, though, is that it wants to be the framework for your app, and as such you're best off developing a single page app and letting JQM handle all of the navigation. If you start mixing and matching JQM navigation with Durandal, Backbone, Angular or whathaveyou things get wonky in a hurry. I have settled on using JQM as my UI framework and Knockout to wire it up, a combo that works great for me.

As far as the gestures: I've found Hammer.js to be the most successful at running on the Android/iOS/Windows trifecta, but I've never been able to get gestures to work reliably across different devices. For example, swipe navigation might work great on a Nexus 6 running KitKat, but the same code won't work at all on an HTC One also running KitKat. And it might work great on a Surface tablet running Windows 8, but not on a Dell XPS 10 tablet running Windows 8 RT. (True stories both of these). So it's not really the platform that's the issue, it's the device itself. The approach I've settled on is to provide cool stuff like swipe navigation and pinch-to-zoom in the hope that the device will support it, but also provide an alternate means to do those things (a nav button, a zoom icon) for those that don't.

Hope this is helpful! :)

---

Related Topics