js判断移动端的屏幕滑动方向

最新推荐文章于 2023-08-18 13:57:49 发布

原创最新推荐文章于 2023-08-18 13:57:49 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种通过touchstart和touchmove事件来检测用户在触摸屏上滑动方向的方法。利用touchstart事件记录起始坐标，并在touchmove事件中计算当前坐标与起始坐标的差值，以此判断滑动的方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：分别利用touchstart和touchmove事件获取开始滑动时和滑动过程的坐标，然后利用两者获取的横、纵坐标的差值判断

代码示例：

var startX,startY; // 定义全局坐标变量
touchStartHandle(e) {
  try {
    startX = Number(e.touches[0].clientX);
    startY = Number(e.touches[0].clientY);
  } catch (e) {
    console.log(e.message);
  }
}
touchMoveHandle(e) {
  var endX = Number(e.touches[0].clientX);
  var endY = Number(e.touches[0].clientY);
  var diffX = endX - startX;
  var diffY = endY - startY;
  try {
    if (diffY > 0) {
	direction = 'down';
    } else if (diffY < 0) {
        direction = 'up';
    }
    if(diffX > 0){
	direction = 'right';
    }else if(diffX < 0) {
	direction = 'left';
    }
  } catch (e) {
    console.log(e.message);
  }
}