Mobile H5 手势解决方案

2018-11-12 本文已影响19人 EdmundChen

背景

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

image.png

Mobile 触摸事件列表 TouchEvent

touchstart：当触点与触控设备表面接触时触发touchstart 事件.
touchend: 当触点离开触控平面时触发touchend事件.
touchmove: 当触点在触控平面上移动时触发touchmove事件。
touchcancel: 当触控点被特定的实现方式打乱时触发 touchcancel 事件（例如，创建了太多的触控点）。

Touch Interface

Interface Interface 描述了触摸事件的单个触摸点。 Touch对象是不可变的; 创建一个后，其属性不得更改。

Attributes

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')
  }