移动端滑动手势怎么判断方向和距离？

ლ东宁提问于 2026-03-09 01:55:19 阅读 6

移动

我在做移动端的图片轮播，想通过 touch 事件实现左右滑动切换。但不知道怎么准确判断用户是向左还是向右滑，而且滑动距离太小的时候不应该触发切换。

我试过记录 touchstart 和 touchend 的 clientX 差值，但有时候会误判，比如上下滑动也会触发。有没有更可靠的方法？

let startX, endX;
element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});
element.addEventListener('touchend', (e) => {
  endX = e.changedTouches[0].clientX;
  const diff = startX - endX;
  if (Math.abs(diff) > 50) {
    if (diff > 0) console.log('左滑');
    else console.log('右滑');
  }
});

我来解答赞 8 收藏

反馈

1 条解答

Mr.景源 Lv1

你漏了touchmove事件，而且只判断X轴不够严谨。改成这样：

let startX, startY;

let isScrolling;



element.addEventListener('touchstart', (e) => {

  startX = e.touches[0].clientX;

  startY = e.touches[0].clientY;

  isScrolling = false;

});



element.addEventListener('touchmove', (e) => {

  const x = e.touches[0].clientX;

  const y = e.touches[0].clientY;

  const xDiff = Math.abs(x - startX);

  const yDiff = Math.abs(y - startY);

  

  // 先判断是否横向滑动（防止误判上下滑动）

  if (xDiff > yDiff && xDiff > 10) {

    isScrolling = true;

    e.preventDefault(); // 阻止默认滚动行为

  }

});



element.addEventListener('touchend', (e) => {

  if (!isScrolling) return;

  const endX = e.changedTouches[0].clientX;

  const diff = startX - endX;

  if (Math.abs(diff) > 50) {

    if (diff > 0) console.log('左滑');

    else console.log('右滑');

  }

});

这样加了Y轴判断和防抖处理，误触少多了。

2026-03-09 02:03