移动端滑动事件怎么判断方向？

迷人的子轩提问于 2026-03-04 10:18:22 阅读 12

移动

我在做移动端的图片轮播，想通过手指滑动切换图片，但不知道怎么准确判断用户是向左还是向右滑。

试过用 touchstart 和 touchend 记录坐标差，但有时候滑得慢就识别不出来，而且上下滑动也会误触发。有没有靠谱的判断方法？

现在代码大概是这样：

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

手势识别

我来解答赞 6 收藏

反馈

1 条解答

设计师子聪 Lv1

你的代码逻辑其实差不多，就是缺了个“阈值”判断。手指稍微动一下哪怕 1 像素也会触发，而且没区分开到底是想滑动还是只是点了一下。加上一个 50px 左右的阈值，并且强制要求水平移动距离必须大于垂直移动距离，就能解决慢滑和误触的问题。

直接复制下面这段代码试试，我加了注释：

let startX, startY;

// 定义滑动生效的最小距离，单位 px，根据手感自己调

const MIN_DISTANCE = 50;



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

    startX = e.touches[0].clientX;

    startY = e.touches[0].clientY;

}, { passive: true }); // passive: true 提升滚动性能



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

    // touchend 没有 touches，要用 changedTouches

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

    const endY = e.changedTouches[0].clientY;

    

    const diffX = endX - startX;

    const diffY = endY - startY;



    // 核心判断逻辑：

    // 1. 水平移动距离超过阈值 (排除轻微抖动)

    // 2. 水平移动距离 > 垂直移动距离 (排除上下滑动干扰)

    if (Math.abs(diffX) > MIN_DISTANCE && Math.abs(diffX) > Math.abs(diffY)) {

        if (diffX > 0) {

            console.log('向右滑');

            // 这里处理右滑逻辑，比如上一张

        } else {

            console.log('向左滑');

            // 这里处理左滑逻辑，比如下一张

        }

    }

});

主要是加了 MIN_DISTANCE 这个常量，把 Math.abs(diffX) > Math.abs(diffY) 这个判断保留并加强了。这样你上下滑页面的时候，只要水平位移不大，就不会误触发轮播图切换。

2026-03-04 13:08