Wie erkennt man die Wischrichtung des Fingers auf mobilen Webseiten mit JavaScript (iPhone/Android-Kompatibilität)?

Fingerbewegungen auf mobilen Webseiten erkennen

In der heutigen, auf Mobilgeräte ausgerichteten Welt ist es von entscheidender Bedeutung, intuitive und reaktionsfähige Weberlebnisse auf allen Geräten bereitzustellen . Benutzer erwarten eine reibungslose Navigation und Interaktion sowohl auf iPhones als auch auf Android-Telefonen. Eine gängige Geste, die für die mobile Navigation unerlässlich ist, ist das Wischen mit dem Finger.

Problem: Wie erkennt man mithilfe von JavaScript genau die Wischrichtung des Fingers eines Benutzers auf einer Webseite und stellt so die Kompatibilität zwischen iPhone und Android-Geräten sicher? ?

Lösung: Glücklicherweise bieten moderne Browser JavaScript-APIs, die es Entwicklern ermöglichen, Berührungsereignisse zu verfolgen. Hier ist ein einfacher Vanilla JS-Codeausschnitt, den Sie in Ihr Projekt integrieren können:

<code class="javascript">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;                                             
};</code>

Testen: Dieser Codeausschnitt wurde getestet und bestätigt, dass er auf Android-Geräten funktioniert. Implementieren Sie es in Ihr Projekt, um das Benutzererlebnis für mobile Benutzer sowohl auf dem iPhone als auch auf Android-Telefonen zu verbessern.

Das obige ist der detaillierte Inhalt vonWie erkennt man die Wischrichtung des Fingers auf mobilen Webseiten mit JavaScript (iPhone/Android-Kompatibilität)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!