如何使用JavaScript偵測行動網頁上的手指滑動方向（iPhone/Android相容）？

偵測行動網頁上的手指滑動

在當今以行動為中心的世界中，在所有裝置上提供直觀且回應靈敏的Web 體驗至關重要。用戶期望在 iPhone 和 Android 手機上實現流暢的導航和互動。在移動導航中必不可少的一種常見手勢是手指滑動。

問題：如何使用JavaScript 精確偵測使用者手指在網頁上的滑動方向，確保iPhone 和Android 裝置之間的相容性?

解決方案：幸運的是，現代瀏覽器提供了JavaScript API，讓開發人員可以追蹤觸控事件。這是一個簡單的Vanilla JS 程式碼片段，您可以將其合併到您的專案中：

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

測試： 此程式碼片段已經過測試並確認可以在Android 設備上運行。將其實施到您的專案中，以增強 iPhone 和 Android 手機上行動用戶的用戶體驗。

以上是如何使用JavaScript偵測行動網頁上的手指滑動方向（iPhone/Android相容）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！