Erkennen Sie eine Fingerbewegung durch JavaScript auf dem iPhone und Android

Question

Wie kann man erkennen, dass ein Benutzer mit dem Finger in eine bestimmte Richtung über eine Webseite mit JavaScript gestrichen hat?

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

Answer 1

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

Answer 2

Einige Mods von uppest answer(can't comment...), um mit zu kurzen Swipes umzugehen

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 )>150){ //to deal with to short swipes

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {/* left swipe */ 
            alert('left!');
        } else {/* right swipe */
            alert('right!');
        }                       
    } else {
        if ( yDiff > 0 ) {/* up swipe */
            alert('Up!'); 
        } else { /* down swipe */
            alert('Down!');
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;
    }
};

Answer 3

JQuery Mobile bietet auch Unterstützung für das Streichen: http://api.jquerymobile.com/swipe/

Beispiel

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

Answer 4

Ich habe neu verpackt TouchWipe als ein kurzes Jquery-Plugin: detectSwipe

Answer 5

Ich wollte nur das Wischen nach links und rechts erkennen, aber die Aktion nur auslösen, wenn das Berührungsereignis endet Deshalb habe ich die großartige Antwort von @givanse leicht abgeändert, um das zu tun.

Warum sollte man das tun? Wenn der Nutzer zum Beispiel während des Wischens merkt, dass er nicht mehr wischen möchte, er kann seinen Finger an der ursprünglichen Position bewegen (eine sehr beliebte "Dating"-Telefonanwendung tut dies ;)), und dann wird das Ereignis "Wischen nach rechts" abgebrochen.

Um also ein "Swipe right"-Ereignis zu vermeiden, nur weil es einen horizontalen Unterschied von 3px gibt, habe ich einen Schwellenwert hinzugefügt, unter dem ein Ereignis verworfen wird: Um ein "Swipe right"-Ereignis zu haben, muss der Benutzer mindestens 1/3 der Browserbreite wischen (natürlich können Sie dies ändern).

All diese kleinen Details verbessern das Benutzererlebnis.

Beachten Sie, dass derzeit ein "Touch-Pinch-Zoom" als Streichen erkannt werden kann, wenn einer der beiden Finger während des Pinch-Zooms eine große horizontale Bewegung ausführt.

Hier ist der (Vanilla JS) Code:

var xDown = null, yDown = null, xUp = null, yUp = null;
document.addEventListener('touchstart', touchstart, false);        
document.addEventListener('touchmove', touchmove, false);
document.addEventListener('touchend', touchend, false);
function touchstart(evt) { const firstTouch = (evt.touches || evt.originalEvent.touches)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }
function touchmove(evt) { if (!xDown || !yDown ) return; xUp = evt.touches[0].clientX; yUp = evt.touches[0].clientY; }
function touchend(evt) { 
    var xDiff = xUp - xDown, yDiff = yUp - yDown;
    if ((Math.abs(xDiff) > Math.abs(yDiff)) && (Math.abs(xDiff) > 0.33 * document.body.clientWidth)) { 
        if (xDiff < 0) 
            document.getElementById('leftnav').click();
        else
            document.getElementById('rightnav').click();
    } 
    xDown = null, yDown = null;
}