Heim > Web-Frontend > js-Tutorial > Wie erkennt man die Wischrichtung des Fingers auf mobilen Webseiten mit JavaScript (iPhone/Android-Kompatibilität)?

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

DDD
Freigeben: 2024-10-19 18:50:30
Original
705 Leute haben es durchsucht

How to Detect Finger Swipe Direction on Mobile Web Pages with JavaScript (iPhone/Android Compatibility)?

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>
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage