如何在 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 体验，通过流畅和手势驱动的交互来取悦用户。