How to detect a swipe touch event on mobile browsers with JavaScript

Browsers have supported various mouse-based events like clicks, down to the detection of when the mouse button is down and when it's released. You can know the coordinates of the mouse cursor, all in JavaScript. Mobile interfaces have brought some new gestures beyond what desktops provided. One big set of such UI events is from the smartphone's screen allowing touch and even multi-touch. Multitouch allows more types of UI events.

Many mobile apps support swiping, not just as a way to move a visible object around thescreen but applied for the whole screen. Tinder uses left swipe and right swipe to make processing potential sexual encounters quicker. Ebook readers use the same motion to flip through pages.

Some browsers support swiping, and all the main mobile browsers support it. There are some desktop browsers, like Firefox, which don't support the touch events which other browsers implement.

To detect swipe motions in JavaScript in a browser you can simply subscribe to the tocuhstart and touchmove events. In the callbacks to those events you'll receive event objects with an array called touches as a member, which has the X and Y coordinates of where the touch occurred. So you note the coordinates when a touchstart happened, then when a touchmove occurs afterwards, the vector between the two coordinates from touchstart to touchmove is the swipe motion. This is different from a click, but requires the user to put their finger down and then move it across the screen to another position.

Here's an example from StackOverflow:

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

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

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

There are also libraries that can do this for you, like Hammer.js. Hammer.js does a lot more than just swipes, it does pinches, rotates, and more, but adds another dependency to your project, even if it is smaller than alternatives. It's also buggy (while doing way more), whereas the above works on my Android devices.

There's also a dead project called Swipe.js.