移动端滑动方向检测时为什么上下滑动会误触左右事件？

Designer°悦辰提问于 2026-02-14 21:45:29 阅读 17

移动

我在做移动端左右滑动切换卡片的功能时遇到了问题。用了touchstart记录初始坐标，touchend计算dx和dy差值，但有时候上下滑动也会触发左右切换事件。比如看文章时下拉刷新却被切到上一张卡片。

尝试用绝对值比较判断：if (Math.abs(dx) > Math.abs(dy))，但当滑动角度接近45度时仍然会出错。还试过设置距离阈值，但快速滑动时dx值有时会突然跳变…


let startX, startY;
element.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});
element.addEventListener('touchend', e => {
  const dx = e.changedTouches[0].clientX - startX;
  const dy = e.changedTouches[0].clientY - startY;
  if (Math.abs(dx) > 50) {
    dx > 0 ? swipeLeft() : swipeRight();
  }
});

有没有更好的方向判断方式？或者需要添加什么条件过滤？感觉现在的逻辑在斜向滑动时特别容易出错…

手势识别

我来解答赞 5 收藏

反馈

1 条解答

爱学习的红会 Lv1

问题出在只判断距离不够，还要加滑动角度过滤。直接用atan2计算角度，限制在45度范围内才触发。

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 dx = endX - startX;

  const dy = endY - startY;

  const angle = Math.atan2(Math.abs(dy), Math.abs(dx)) * 180 / Math.PI;

  if (angle < 45 && Math.abs(dx) > 50) {

    dx > 0 ? swipeLeft() : swipeRight();

  }

});

角度判断加上去基本就够了，省得写一堆乱七八糟的阈值判断。实在不行再加个时间阈值过滤下快速滑动的情况。

2026-02-14 22:00