Erkennen Sie einen Fingerstreich durch JavaScript auf dem iPhone und Android

Wie können Sie erkennen, dass ein Benutzer seinen Finger in eine Richtung über eine Webseite mit JavaScript gezogen hat?

Ich habe mich gefragt, ob es eine Lösung gibt, die für Websites sowohl auf dem iPhone als auch auf einem Android-Telefon funktioniert.

Einfaches Vanilla-JS-Codebeispiel:

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

Getestet in Android.

Einfaches Vanille-JS-Beispiel für horizontales Wischen:

let touchstartX = 0
let touchendX = 0

const slider = document.getElementById('slider')

function handleGesture() {
  if (touchendX < touchstartX) alert('swiped left!')
  if (touchendX > touchstartX) alert('swiped right!')
}

slider.addEventListener('touchstart', e => {
  touchstartX = e.changedTouches[0].screenX
})

slider.addEventListener('touchend', e => {
  touchendX = e.changedTouches[0].screenX
  handleGesture()
})

Sie können ziemlich dieselbe Logik für vertikales Wischen verwenden.

Ich habe einige der Antworten hier in einem Skript zusammengeführt, das verwendet Benutzerdefiniertes Ereignis um geklaute Ereignisse im DOM auszulösen. Fügen Sie die 0,7k hinzu swiped-events.min.js Skript auf Ihre Seite und hören Sie es sich an geklaut Veranstaltungen:

geklaut

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

nach links gewischt

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

nach rechts gewischt

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

hochgewischt

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

nach unten gewischt

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

Sie können auch direkt an ein Element anhängen:

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

Optionale Konfiguration

Sie können die folgenden Attribute angeben, um zu optimieren, wie die Wischinteraktion auf Ihrer Seite funktioniert (diese sind optional).

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

Um die Standardwerte anwendungsweit festzulegen, legen Sie die Konfigurationsattribute für das oberste Element fest:

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

Quellcode ist verfügbar unter GitHub

Basierend auf der Antwort von @givanse können Sie dies folgendermaßen tun 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);
    }
}

Sie können es dann wie folgt verwenden:

// 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();

Ich habe festgestellt, dass die brillante Antwort von @givanse die zuverlässigste und kompatibelste für mehrere mobile Browser zum Registrieren von Wischaktionen ist.

Es ist jedoch eine Änderung in seinem Code erforderlich, damit er in modernen mobilen Browsern funktioniert, die verwenden jQuery.

event.toucheswird es nicht geben, wenn jQuery verwendet wird und daraus resultiert undefined und sollte ersetzt werden durch event.originalEvent.touches. Ohne jQuery, event.touches sollte gut funktionieren.

Die Lösung wird also

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

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
    xDown = evt.originalEvent.touches[0].clientX;                                      
    yDown = evt.originalEvent.touches[0].clientY;                                      
};                                                

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

    var xUp = evt.originalEvent.touches[0].clientX;                                    
    var yUp = evt.originalEvent.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;                                             
};

Getestet am:

• Android: Chrome, UC-Browser
• iOS: Safari, Chrome, UC-Browser

Was ich zuvor verwendet habe, ist, dass Sie das Mousedown-Ereignis erkennen, seine x-, y-Position aufzeichnen müssen (je nachdem, was relevant ist), dann das Mouseup-Ereignis erkennen und die beiden Werte subtrahieren.

jQuery Mobile enthält auch Swipe-Unterstützung: http://api.jquerymobile.com/swipe/

Beispiel

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