HTML5 手势检测原理和实现

最新推荐文章于 2024-08-02 10:52:28 发布

IT新时代

最新推荐文章于 2024-08-02 10:52:28 发布

阅读量1.7k

点赞数 2

文章标签： html5 前端 web前端前端开发前端基础

本文链接：https://blog.csdn.net/llll789789/article/details/98963341

版权

本文介绍了HTML5中常见的手势检测，包括tap、double tap、long press、pinch和rotate，详细阐述了这些手势的原理及JavaScript实现。通过手势检测库，可以创建具有炫酷交互效果的前端应用。

摘要由CSDN通过智能技术生成

手势

常用的 HTML5 手势可以分为两类，单点手势和两点手势。单点手势有 tap（单击），double tap（双击），long tap（长按），swipe（挥），move（移动）。两点手势有 pinch（缩放），rotate（旋转）。

接下来我们实现一个检测这些手势的 javaScript 库，并利用这个手势库做出炫酷的交互效果。

移动

关于移动手势检测我们这里不再赘述。总结一下就是在每次touchmove事件发生时，把两个位移点之间的坐标位置相减，就可以了。

单击（tap）

手势检测的关键是用 touchstart，touchmove，touchend 三个事件对手势进行分解。

那么怎么分解单击事件呢？

在 touchstart 发生时进入单击检测，只有一个接触点。因为单击事件限制为一个手指的动作。
没有发生 touchmove 事件或者 touchmove 在一个很小的范围（如下图）。限制 touchmove 在一个很小范围，是为了给用户一定的冗余空间，因为不能保证用户手指在接触屏幕的时候不发生轻微的位移。

3.touchend 发生在 touchstart后的很短时间内（如下图）。这个时间段的阈值是毫秒级，用来限制手指和屏幕接触的时间。因为单击事件从开始到结束是很快的。

有了上面的流程，就可以开始实现 tap 事件监测了。

web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 
_getTime() {

  return new Date().getTime(); 

}

_onTouchStart(e) {

    //记录touch开始的位置

    this.startX = e.touches[0].pageX;

    this.startY = e.touches[0].pageY;

    if(e.touches.length > 1) {

      //多点监测

      ...

    }else {

      //记录touch开始的时间

      this.startTime = this._getTime();

    }

 }

_onTouchMove(e) {

  ...

  //记录手指移动的位置

  this.moveX = e.touches[0].pageX;

  this.move