当前位置：首页 > JavaScript

js手势实现

2026-01-14 14:14:23JavaScript

手势识别实现方法

在JavaScript中实现手势识别通常涉及监听触摸事件（touchstart、touchmove、touchend）或鼠标事件（mousedown、mousemove、mouseup），并通过计算移动距离、速度等参数来判断手势类型。

基础事件监听

const element = document.getElementById('gestureArea');
let startX, startY;

element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

element.addEventListener('touchmove', (e) => {
  const moveX = e.touches[0].clientX - startX;
  const moveY = e.touches[0].clientY - startY;

  // 手势判断逻辑
});

常见手势实现

滑动检测

element.addEventListener('touchmove', (e) => {
  const threshold = 50; // 滑动阈值
  const moveX = e.touches[0].clientX - startX;

  if (Math.abs(moveX) > threshold) {
    if (moveX > 0) {
      console.log('向右滑动');
    } else {
      console.log('向左滑动');
    }
  }
});

缩放检测

let initialDistance;

element.addEventListener('touchstart', (e) => {
  if (e.touches.length >= 2) {
    initialDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );
  }
});

element.addEventListener('touchmove', (e) => {
  if (e.touches.length >= 2) {
    const currentDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );

    const scale = currentDistance / initialDistance;
    console.log('缩放比例:', scale);
  }
});

旋转检测

element.addEventListener('touchstart', (e) => {
  if (e.touches.length >= 2) {
    initialAngle = Math.atan2(
      e.touches[1].clientY - e.touches[0].clientY,
      e.touches[1].clientX - e.touches[0].clientX
    );
  }
});

element.addEventListener('touchmove', (e) => {
  if (e.touches.length >= 2) {
    const currentAngle = Math.atan2(
      e.touches[1].clientY - e.touches[0].clientY,
      e.touches[1].clientX - e.touches[0].clientX
    );

    const rotation = (currentAngle - initialAngle) * (180 / Math.PI);
    console.log('旋转角度:', rotation);
  }
});

使用手势库

对于更复杂的手势识别，可以使用现成的库如Hammer.js：

const hammertime = new Hammer(element);

hammertime.on('pan', (e) => {
  console.log('平移:', e.deltaX, e.deltaY);
});

hammertime.on('pinch', (e) => {
  console.log('缩放:', e.scale);
});

hammertime.on('rotate', (e) => {
  console.log('旋转:', e.rotation);
});

性能优化建议

避免在touchmove事件中执行过多计算或DOM操作，使用requestAnimationFrame进行节流。

let ticking = false;

element.addEventListener('touchmove', (e) => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 执行手势处理逻辑
      ticking = false;
    });
    ticking = true;
  }
});

以上方法提供了从基础到高级的手势识别实现方案，可以根据具体需求选择合适的实现方式。

js手势实现