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.

Based on @givanse's answer, this is how you could do it with classes:

class Swipe {    constructor(element) {        this.xDown = null;        this.yDown = null;        this.element = typeof(element) === 'string' ? document.querySelector(element) : element;        this.element.addEventListener('touchstart', function(evt) {            this.xDown = evt.touches[0].clientX;            this.yDown = evt.touches[0].clientY;        }.bind(this), false);    }    onLeft(callback) {        this.onLeft = callback;        return this;    }    onRight(callback) {        this.onRight = callback;        return this;    }    onUp(callback) {        this.onUp = callback;        return this;    }    onDown(callback) {        this.onDown = callback;        return this;    }    handleTouchMove(evt) {        if ( ! this.xDown || ! this.yDown ) {            return;        }        var xUp = evt.touches[0].clientX;        var yUp = evt.touches[0].clientY;        this.xDiff = this.xDown - xUp;        this.yDiff = this.yDown - yUp;        if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.            if ( this.xDiff > 0 ) {                this.onLeft();            } else {                this.onRight();            }        } else {            if ( this.yDiff > 0 ) {                this.onUp();            } else {                this.onDown();            }        }        // Reset values.        this.xDown = null;        this.yDown = null;    }    run() {        this.element.addEventListener('touchmove', function(evt) {            this.handleTouchMove(evt).bind(this);        }.bind(this), false);    }}

You can than use it like this:

// Use class to get element by string.var swiper = new Swipe('#my-element');swiper.onLeft(function() { alert('You swiped left.') });swiper.run();// Get the element yourself.var swiper = new Swipe(document.getElementById('#my-element'));swiper.onLeft(function() { alert('You swiped left.') });swiper.run();// One-liner.(new Swipe('#my-element')).onLeft(function() { alert('You swiped left.') }).run();

I merged a few of the answers here into a script that uses CustomEvent to fire swiped events in the DOM. Add the 0.7k swiped-events.min.js script to your page and listen for swiped events:

swiped

document.addEventListener('swiped', function(e) {    console.log(e.target); // the element that was swiped    console.log(e.detail.dir); // swiped direction});

swiped-left

document.addEventListener('swiped-left', function(e) {    console.log(e.target); // the element that was swiped});

swiped-right

document.addEventListener('swiped-right', function(e) {    console.log(e.target); // the element that was swiped});

swiped-up

document.addEventListener('swiped-up', function(e) {    console.log(e.target); // the element that was swiped});

swiped-down

document.addEventListener('swiped-down', function(e) {    console.log(e.target); // the element that was swiped});

You can also attach directly to an element:

document.getElementById('myBox').addEventListener('swiped-down', function(e) {    console.log(e.target); // the element that was swiped});

Optional config

You can specify the following attributes to tweak how swipe interaction functions in your page (these are optional).

<div data-swipe-threshold="10"     data-swipe-timeout="1000"     data-swipe-ignore="false">      Swiper, get swiping!</div>

To set defaults application wide, set config attributes on topmost element:

<body data-swipe-threshold="100" data-swipe-timeout="250">    <div>Swipe me</div>    <div>or me</div></body>

Source code is available on Github