js怎么实现手势识别-js教程-PHP中文网

js怎么实现手势识别

月夜之吻

发布： 2025-08-24 13:50:02

原创

565人浏览过

javascript实现手势识别需监听touchstart、touchmove和touchend事件，1. 在touchstart中记录起始坐标和时间；2. 在touchmove中持续获取坐标并可初步判断方向，但避免复杂计算以提升性能；3. 在touchend中根据位移差和时间差判断手势类型，如滑动或点击，通过设定阈值区分，同时可使用节流、防抖或requestanimationframe优化性能，对于多点触控需计算多点间距离变化以识别捏合等手势，复杂场景建议使用hammer.js等手势库。

js怎么实现手势识别

JavaScript实现手势识别，简单来说，就是通过监听触摸事件，然后分析这些事件产生的坐标变化和时间间隔，从而判断用户做了什么手势。

解决方案：

事件监听： 首先，你需要监听
```
touchstart
```
登录后复制
、
```
touchmove
```
登录后复制
和
```
touchend
```
登录后复制
这三个触摸事件。这三个事件分别在手指触摸屏幕开始、手指在屏幕上移动以及手指离开屏幕时触发。
```
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
document.addEventListener('touchend', handleTouchEnd, false);
```
登录后复制

数据收集： 在

touchstart

登录后复制

事件处理函数中，记录起始触摸点的坐标和时间。在

touchmove

登录后复制

事件处理函数中，持续记录触摸点的坐标。

let startX = null;
let startY = null;
let startTime = null;

function handleTouchStart(evt) {
  startX = evt.touches[0].clientX;
  startY = evt.touches[0].clientY;
  startTime = new Date().getTime();
}

function handleTouchMove(evt) {
  if (!startX || !startY) {
    return;
  }

  let x = evt.touches[0].clientX;
  let y = evt.touches[0].clientY;

  let dx = x - startX;
  let dy = y - startY;

  // 这里可以根据dx和dy来判断滑动方向，并执行相应的操作
  // 例如：
  if (Math.abs(dx) > Math.abs(dy)) {
    // 水平滑动
    if (dx > 0) {
      // 向右滑动
      console.log("向右滑动");
    } else {
      // 向左滑动
      console.log("向左滑动");
    }
  } else {
    // 垂直滑动
    if (dy > 0) {
      // 向下滑动
      console.log("向下滑动");
    } else {
      // 向上滑动
      console.log("向上滑动");
    }
  }
}

登录后复制

手势判断： 在

touchend

登录后复制

事件处理函数中，计算触摸结束点与起始点之间的距离和时间差。根据这些数据，判断用户做了什么手势。例如，如果水平方向的距离足够大，且时间差足够小，则可以判断为水平滑动。

function handleTouchEnd(evt) {
  if (!startX || !startY) {
    return;
  }

  let x = evt.changedTouches[0].clientX;
  let y = evt.changedTouches[0].clientY;

  let dx = x - startX;
  let dy = y - startY;
  let endTime = new Date().getTime();
  let timeDiff = endTime - startTime;

  // 这里可以根据dx、dy和timeDiff来判断手势类型
  // 例如：
  let swipeThreshold = 50; // 滑动阈值
  let timeThreshold = 300; // 时间阈值

  if (Math.abs(dx) > swipeThreshold && timeDiff < timeThreshold) {
    // 水平滑动
    if (dx > 0) {
      // 向右滑动
      console.log("向右滑动");
    } else {
      // 向左滑动
      console.log("向左滑动");
    }
  } else if (Math.abs(dy) > swipeThreshold && timeDiff < timeThreshold) {
    // 垂直滑动
    if (dy > 0) {
      // 向下滑动
      console.log("向下滑动");
    } else {
      // 向上滑动
      console.log("向上滑动");
    }
  }

  // 重置起始坐标和时间
  startX = null;
  startY = null;
  startTime = null;
}

登录后复制

手势库： 对于更复杂的手势识别，例如捏合、旋转等，可以考虑使用现有的JavaScript手势库，例如Hammer.js或AlloyFinger。这些库已经封装了常用的手势识别算法，可以大大简化开发工作。

ViiTor实时翻译
AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

如何优化手势识别的性能？

性能优化是个好问题。首先，避免在

touchmove

登录后复制

事件处理函数中进行复杂的计算。这个函数会被频繁调用，如果计算量过大，会导致页面卡顿。可以将一些计算放到

touchend

登录后复制

事件处理函数中进行。

另外，可以考虑使用节流或防抖技术来减少

touchmove

登录后复制

事件处理函数的调用频率。例如，可以使用

requestAnimationFrame

登录后复制

来控制函数的执行频率。

let lastTime = 0;

function handleTouchMove(evt) {
  let now = new Date().getTime();
  if (now - lastTime < 16) { // 约等于60帧/秒
    return;
  }
  lastTime = now;

  // 你的手势处理逻辑
}

登录后复制

再者，对于不需要手势识别的元素，可以禁用触摸事件的默认行为，避免不必要的性能消耗。

如何处理多点触控？

多点触控稍微复杂一些。你需要遍历

evt.touches

登录后复制

数组，获取每个触摸点的坐标。然后，根据这些坐标的变化，判断用户做了什么手势。

例如，对于捏合手势，你需要计算两个触摸点之间的距离。当距离变小时，表示用户在缩小；当距离变大时，表示用户在放大。

function handleTouchMove(evt) {
  if (evt.touches.length === 2) {
    // 双指操作
    let touch1 = evt.touches[0];
    let touch2 = evt.touches[1];

    let distance = Math.sqrt(
      Math.pow(touch2.clientX - touch1.clientX, 2) +
      Math.pow(touch2.clientY - touch1.clientY, 2)
    );

    // 记录起始距离，并在后续的touchmove事件中计算距离变化
    // 根据距离变化判断捏合手势
  }
}

登录后复制

如何区分滑动和点击？

区分滑动和点击的关键在于判断触摸移动的距离和时间。如果触摸移动的距离很小，且时间很短，则可以判断为点击。反之，如果触摸移动的距离较大，或者时间较长，则可以判断为滑动。

function handleTouchEnd(evt) {
  let x = evt.changedTouches[0].clientX;
  let y = evt.changedTouches[0].clientY;

  let dx = x - startX;
  let dy = y - startY;
  let endTime = new Date().getTime();
  let timeDiff = endTime - startTime;

  let tapThreshold = 10; // 点击阈值
  let timeThreshold = 200; // 时间阈值

  if (Math.abs(dx) < tapThreshold && Math.abs(dy) < tapThreshold && timeDiff < timeThreshold) {
    // 点击事件
    console.log("点击");
  } else {
    // 滑动事件
    console.log("滑动");
  }
}

登录后复制

以上就是js怎么实现手势识别的详细内容，更多请关注php中文网其它相关文章！