如何使用 JavaScript 偵測行動裝置上的手指滑動

使用 JavaScript 偵測 iPhone 和 Android 上的手指滑動

偵測網頁上的手指滑動對於建立互動式行動體驗至關重要。本文探討了一種可在 iPhone 和 Android 裝置上無縫運行的多功能 JavaScript 解決方案。

要偵測手指滑動：

1. 實作 touchstart 和 touchmove 事件的事件偵聽器。
2. 追蹤 xDown 和 yDown 變數中的初始觸控位置。
3. 使用 getTouches() 標準化不同瀏覽器之間的觸控事件。
4. 在handleTouchMove 函數中，計算初始觸摸和當前觸摸之間的差異
5. 檢查水平（X 差異）或垂直（Y 差異）移動是否更顯著。
6. 根據差異決定滑動方向（左、右、上、下）或向下）。

這裡有一個簡單的 JavaScript 程式碼範例來實現此解決方案：

<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 || 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)) {
    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 裝置上成功測試。透過利用這些 JavaScript 技術，您可以輕鬆偵測手指滑動並增強行動 Web 應用程式的使用者體驗。

以上是如何使用 JavaScript 偵測行動裝置上的手指滑動的詳細內容。更多資訊請關注PHP中文網其他相關文章！