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!