Mobile H5 手势解决方案

背景

在手机H5页面开发需求中，我们经常遇到一些手势需求，例如：pinch(捏), rotate(旋转)，multipointStart(多点触摸)，pressMove、Tap、doubleTap、longTap、swipe。以上手势没有原生事件的支持，所以需要自己通过一些方法实现。
这篇文章旨在介绍原生触摸事件，以及如果利用原生事件实现各种手势。

• clientX:  readonly 点相对于视口的水平坐标（以像素为单位），不包括任何滚动偏移

• clientY: readonly 点相对于视口的垂直坐标（以像素为单位），不包括任何滚动偏移

• identifier: readonly 每个触摸点的标识号。当触摸点变为活动状态时，必须为其分配与任何其他活动触摸点不同的 标识符。触摸点保持活动状态时，引用它的所有事件都必须为其指定相同的标识符。

• pageX: readonly 点相对于视口的水平坐标（以像素为单位），包括任何滚动偏移

• pageY: readonly 点相对于视口的垂直坐标（以像素为单位），包括任何滚动偏移

• screenX: readonly 点相对于屏幕的水平坐标（以像素为单位）

• screenY: readonly 点相对于屏幕的垂直坐标（以像素为单位）

• target :类型为EventTarget，readonly 的事件目标在其上的触摸点开始，当它被首先放置在表面上，即使触摸点自移动该元素的交互区域之外。

TouchList Interface

TouchList Interface 定义触摸事件的各个联系点列表。 TouchList对象是不可变的; 创建一个后，其内容不得更改。

Attributes

• length:  readonly returns the number of Touches in the list

TouchEvent Interface

定义touchstart，touchend， touchmove和touchcancel事件类型。 TouchEvent对象是不可变的; 在创建并初始化一个之后，其属性不得更改。

Attributes

• altKey:  类型为boolean，readonly true 如果alt（Alternate）键修饰符被激活; 除此以外false

• changedTouches: 类型TouchList，只读 Touch为活动做出贡献的每个联系点 touches 列表。

说明：
* touchstart事件: 这必须是刚刚对当前事件激活的触摸点列表。
* touchmove事件: 这必须是自上次事件以来已移动的触摸点列表。
* touchend、touchcancel: 这必须是刚从表面移除的触摸点列表。

• ctrlKey: 类型为boolean，readonly true 如果ctrl（Control）键修饰符被激活; 除此以外false

• metaKey: 类型为boolean，readonly true 如果meta（Meta）键修饰符被激活;  否则false。在某些平台上，此属性可能会映射到不同名称的键修饰符。

• shiftKey: 类型为boolean，readonly true 如果移位（Shift）键修改器被激活; 除此以外false

• targetTouches: 类型TouchList，只读

• Touch: 触摸表面并从作为当前事件目标的元素开始的 每个接触点 touches 列表。

• touches: 类型 TouchList，只读 Touch当前接触表面的每个接触点 touches 列表。

手势实现原理

具体实现

浏览器暴露了四个事件给开发者，touchstart touchmove touchend touchcancel，在这四个事件的回调函数可以拿到TouchEvent。

TouchEvent:

• touches：当前位于屏幕上的所有手指动作的列表

• targetTouches：位于当前 DOM 元素上的手指动作的列表

• changedTouches：涉及当前事件的手指动作的列表
  TouchEvent里可以拿到各个手指的坐标和其他参数

Tap点按

image.png

移动端click有300毫秒延时，tap的本质其实就是touchend。但是要判断touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要小于30。小于30才会去触发tap。

longTap 长按

image.png

touchstart开启一个750毫秒的settimeout，如果750ms内有touchmove或者touchend都会清除掉该定时器。超过750ms没有touchmove或者touchend就会触发longTap

doubleTap 双击

touchstart 记录一次当前的事件戳，然后把下一次出发touchstart的时间戳减法上一次的，如果小于250毫秒，并且偏移量小于30则清除Tap的settmeout,调用doubleTap事件

swipe划

image.png

这里需要注意，当touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要大于30，判断swipe，小于30会判断tap。那么用户到底是从上到下，还是从下到上，或者从左到右、从右到左滑动呢？可以根据上面三个判断得出，具体的代码如下：

  _swipeDirection(x1, x2, y1, y2) {    return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
  }

pinch捏

image.png

如上图所示，两点之间的距离比值求pinch的scale。这个scale会挂载在event上，让用户反馈给dom的transform或者其他元素的scale属性。

rotate旋转

image

如上图所示，利用内积，可以求出两次手势状态之间的夹角θ。但是这里怎么求旋转方向呢？那么就要使用差乘（Vector Cross）。 利用cross结果的正负来判断旋转的方向。

image

cross本质其实是面积，可以看下面的推导：

作者：EdmundChen
链接：https://www.jianshu.com/p/da6460330428