HTML5 手势检测原理和实现

　　长按应该是最容易分解的手势。我们可以这样分解：在 touchstart 发生后的很长一段时间内，如果没有发生 touchmove 或者 touchend 事件，那么就触发长按手势。

1. 长按是一个手指的行为，需要检测屏幕上是否只有一个接触点。
2. 如果手指在空间上发生了移动，那么长按事件取消。
3. 如果手指在屏幕上停留的时间超过800ms，那么触发长按手势。
4. 如果手指在屏幕上停留的时间小于800ms，也即 touchend 在 touchstart 发生后的800ms内触发，那么长按事件取消。

　　

_onTouchStart(e) {

  clearTimeout(this.longPressTimeout);

  if(e.touches.length > 1) {

  }else {

    this.longPressTimeout = setTimeout(()=>{

      this._emitEvent('onLongPress');

    });

  }

}

_onTouchMove(e) {

  ...

  clearTimeout(this.longPressTimeout);

  ...

}

_onTouchEnd(e) {

  ...

  clearTimeout(this.longPressTimeout);

  ...

}

　

   　缩放(pinch)

　　缩放是一个非常有趣的手势，还记得第一代iPhone双指缩放图片给你带来的震撼吗?虽然如此，缩放手势的检测却相对简单。

1. 缩放是两个手指的行为，需要检测屏幕上是否有两个接触点。
2. 缩放比例的量化，是通过两次缩放行为之间的距离的比值得到，如下图。

　　所以缩放的核心是获取两个接触点之间的直线距离。

//勾股定理

_getDistance(xLen,yLen) {
   return Math.sqrt(xLen * xLen + yLen * yLen);
  }