HTML5 手势检测原理和实现

发布时间:2017-06-25 00:00 编辑:站点网
  单击(tap)


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

 

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

 

 

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

 

 

 



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

 

 



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

更多相关内容:
    无相关信息