移动端党必看！JS实现超简单手势识别的4种方案

本篇文章向大家介绍《移动端必看！JS实现手势识别的4种超简单方案》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

移动端手势识别可通过四种方案实现。1.原生touch事件，灵活但代码量大且需处理兼容性；2.Hammer.js库使用简单但增加体积；3.Pointer Events API标准化但兼容性差；4.Web Components封装组件化逻辑。选择时应根据项目复杂度、性能、兼容性及开发效率权衡。优化性能可通过减少监听、使用requestAnimationFrame、节流和避免主线程阻塞。处理冲突可stopPropagation、preventDefault或定义优先级。测试应结合真机、模拟器和单元测试。

移动端手势识别，简单来说，就是让你的 JavaScript 代码能“看懂”用户在屏幕上划拉、捏合等动作，并根据这些动作做出相应的反应。实现方式有很多，但目标都是让你的 Web 应用或混合应用更具交互性。

js实现手势识别功能，移动端手势识别的4种实现方案：

方案一：原生 touch 事件

这是最基础的方式，直接监听 touchstart、touchmove、touchend 和 touchcancel 这四个 touch 事件。你需要自己计算手指移动的距离、方向、速度等，然后判断是什么手势。

优点： 灵活，完全掌控，可以实现各种复杂的手势。

缺点： 代码量大，需要处理各种边界情况，容易出错，兼容性问题也需要考虑。例如，不同设备的 touch 事件坐标可能存在差异。

示例代码：

let startX, startY;

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

document.addEventListener('touchmove', (e) => {
  const x = e.touches[0].clientX;
  const y = e.touches[0].clientY;
  const deltaX = x - startX;
  const deltaY = y - startY;

  // 根据 deltaX 和 deltaY 判断手势方向
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    if (deltaX > 0) {
      console.log('向右滑动');
    } else {
      console.log('向左滑动');
    }
  } else {
    if (deltaY > 0) {
      console.log('向下滑动');
    } else {
      console.log('向上滑动');
    }
  }
});

document.addEventListener('touchend', (e) => {
  // 处理 touchend 事件
});

方案二：使用 Hammer.js

Hammer.js 是一个流行的手势识别库，它封装了 touch 事件的处理，提供了更高级的手势识别功能，例如 swipe、pinch、rotate 等。

优点： 使用简单，功能强大，跨平台兼容性好。

缺点： 引入第三方库，会增加项目体积。

示例代码：

const element = document.getElementById('myElement');
const hammer = new Hammer(element);

hammer.on('swipeleft', function(ev) {
  console.log('向左滑动');
});

hammer.on('swiperight', function(ev) {
  console.log('向右滑动');
});

hammer.get('pinch').set({ enable: true });
hammer.get('rotate').set({ enable: true });

hammer.on("pinch", function(ev) {
  console.log(ev.scale); // 缩放比例
});

hammer.on("rotate", function(ev) {
  console.log(ev.rotation); // 旋转角度
});

方案三：使用 Pointer Events API

Pointer Events API 是 W3C 标准，旨在统一处理鼠标、触摸和笔等输入设备。相比 touch 事件，它更通用，也更易于使用。

优点： 标准化，易于使用，可以处理多种输入设备。

缺点： 兼容性不如 touch 事件好，需要 polyfill。

示例代码：

element.addEventListener('pointerdown', (e) => {
  // 处理 pointerdown 事件
});

element.addEventListener('pointermove', (e) => {
  // 处理 pointermove 事件
});

element.addEventListener('pointerup', (e) => {
  // 处理 pointerup 事件
});

方案四：使用 Web Components

可以封装一个 Web Component，将手势识别的逻辑封装在组件内部，对外提供简单的 API。

优点： 组件化，易于复用，代码结构清晰。

缺点： 需要学习 Web Components 的相关知识。

示例代码：

class GestureRecognizer extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
      </style>
      <div><slot></slot></div>
    `;

    this.startX = 0;
    this.startY = 0;

    this.addEventListener('touchstart', this._handleTouchStart);
    this.addEventListener('touchmove', this._handleTouchMove);
    this.addEventListener('touchend', this._handleTouchEnd);
  }

  _handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
  }

  _handleTouchMove(e) {
    const x = e.touches[0].clientX;
    const y = e.touches[0].clientY;
    const deltaX = x - this.startX;
    const deltaY = y - this.startY;

    // 根据 deltaX 和 deltaY 判断手势方向
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      if (deltaX > 0) {
        this.dispatchEvent(new CustomEvent('swipeRight'));
      } else {
        this.dispatchEvent(new CustomEvent('swipeLeft'));
      }
    } else {
      if (deltaY > 0) {
        this.dispatchEvent(new CustomEvent('swipeDown'));
      } else {
        this.dispatchEvent(new CustomEvent('swipeUp'));
      }
    }
  }

  _handleTouchEnd(e) {
    // 处理 touchend 事件
  }
}

customElements.define('gesture-recognizer', GestureRecognizer);

使用：

<gesture-recognizer id="myGestureElement">
  <div>This is the content</div>
</gesture-recognizer>

<script>
  const gestureElement = document.getElementById('myGestureElement');
  gestureElement.addEventListener('swipeLeft', () => {
    console.log('Gesture: Swipe Left detected on Web Component!');
  });
</script>

如何选择合适的手势识别方案？

• 项目复杂度： 如果项目只需要简单的手势识别，例如 swipe，可以使用 Hammer.js 或 Pointer Events API。如果需要实现复杂的手势，例如自定义手势，建议使用原生 touch 事件。
• 性能要求： 原生 touch 事件的性能最高，但需要自己优化。Hammer.js 的性能也不错，但需要注意配置，避免不必要的手势识别。
• 兼容性要求： touch 事件的兼容性最好，Pointer Events API 需要 polyfill。
• 开发效率： Hammer.js 和 Web Components 可以提高开发效率。

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

• 减少事件监听： 只监听需要的手势事件。
• 使用 requestAnimationFrame： 在 touchmove 事件中，使用 requestAnimationFrame 来更新 UI，避免卡顿。
• 节流： 对 touchmove 事件进行节流，避免频繁计算。
• 避免阻塞主线程： 将耗时的计算放在 Web Worker 中进行。

如何处理手势冲突？

• stopPropagation： 阻止事件冒泡，避免父元素也响应手势。
• preventDefault： 阻止默认行为，例如滚动。
• 使用手势优先级： 定义手势的优先级，优先处理优先级高的手势。

如何测试手势识别功能？

• 使用真机测试： 模拟真实用户的手势操作。
• 使用模拟器测试： 使用 Chrome DevTools 的模拟器来模拟 touch 事件。
• 编写单元测试： 针对手势识别的逻辑编写单元测试。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《移动端党必看！JS实现超简单手势识别的4种方案》文章吧，也可关注golang学习网公众号了解相关技术文章。