如何在iPhone 和Android 上的JavaScript 中檢測手指滑動

開發適合行動裝置的Web 應用程式時，偵測手指滑動等使用者手勢對於創建直覺且響應靈敏的介面至關重要。本指南提供了一個全面的解決方案，使您能夠使用 JavaScript 檢測 iPhone 和 Android 裝置中的手指滑動。

為了偵測手指滑動，我們利用 JavaScript 中的觸控事件偵聽器。以下是幫助您入門的範例程式碼片段：

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches || evt.originalEvent.touches;
}

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

此程式碼片段偵聽「touchstart」和「touchmove」事件，捕捉初始觸控位置以及移動過程中的更新位置。透過比較 x 和 y 的差異，我們可以確定滑動的方向。無論是向右、向左、向上還是向下滑動，此程式碼都提供了用於檢測手指滑動的強大解決方案。

此方法經過測試和驗證，可在 Android 裝置上有效運作。透過將其合併到您的 JavaScript 程式碼庫中，您可以建立行動優先的 Web 體驗，透過流暢且手勢驅動的互動來取悅使用者。