如何在 iPhone 和 Android 上的 JavaScript 中偵測並確定手指滑動方向？

在iPhone 和Android 上用JavaScript 檢測手指滑動

在當今以移動為中心的世界中，在各種設備上提供無縫的用戶體驗至關重要。對可用性做出重大貢獻的一方面是能夠檢測 Web 應用程式中的手指滑動。本文介紹了一個普通的 JS 解決方案，可以在 iPhone 和 Android 平台上解決這個挑戰。

辨識使用者滑動

為了在 JavaScript 中偵測手指滑動，我們將利用「touchstart」事件偵聽器和「觸控移動」。這些監聽器追蹤初始觸控點（xDown、yDown），然後監視後續的觸控動作。

決定滑動方向

辨識滑動方向的關鍵在於計算觸控點之間的差異「觸摸移動」事件。透過比較x 軸和y 軸的差異，我們可以確定最顯著的移動：

• 如果x 軸的差異大於y 軸的差異：發生了水平滑動.
• 否則，發生了垂直滑動。

根據這些計算，我們可以將滑動分類為：

• 水平滑動：向左或向右
• 垂直滑動：向上或向下

範例程式碼

以下程式碼片段提供了一個簡單的尚未有效實現滑動偵測：

<code class="js">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 上：

• Safari
• Chrome
• Firefox

結論

此JavaScript 解決方案支援您可以在iPhone 和Android 裝置上有效地偵測手指滑動。它為建立更直觀、用戶友好的 Web 應用程式提供了堅實的基礎，這些應用程式可以自然地響應觸控手勢。

以上是如何在 iPhone 和 Android 上的 JavaScript 中偵測並確定手指滑動方向？的詳細內容。更多資訊請關注PHP中文網其他相關文章！