移动端多点触控开发库–hammer.js

在之前的移动端开发中，基础库采用的都是zetpo.js，一些基本的手势交互也是用原生的touch事件完成。但最近一个项目里涉及了拖拽和缩放等一些多点触控的复杂操作，考虑项目时间紧、自己封装多点触控库的复杂，于是就决定使用hammer.js作为多点触控开发库。一个项目用下来，对hammer.js也有大概的认知了。接下来的内容描述了hammer.js的所有触摸行为和一些方法，其中有些方法和属性默认是禁止的，需要手动开启：

一、pan

定义 ： 平移；手指（或鼠标）按下，拖动页面触发。

事件：

注意点 ：

1. 触发pan识别器的最小滑动距离为10。
2. 默认情况下，纵向移动是禁用的，可通过如何代码（DIRECTION_VERTICAL 或 DIRECTION_ALL）开启：

var panBox = $(".pan-box"),
    mPanBox = new Hammer(panBox .get(0));// zepto对象转换成原生DOM
 
mBox .get("pan").set({
    // direction: Hammer.DIRECTION_VERTICAL
    direction: Hammer.DIRECTION_ALL
});

相关值： e.deltaX 和 e.deltaY；表示平移的量，参考单位为px。左平移时deltaX为负递增，右平移时deltaX正递增。上平移时e.deltaY为负递增，下平移时e.deltaY为正递增。当每次panstart时，e.deltaX 和 e.deltaY会重新从10开始递增或递减。
pan的相关演示页面》

二、pinch

定义 ： 缩放；多个手指（或鼠标，可通过模拟）相向或反相移动时触发。
事件 ：

注意点 ：

1. 触发pinch识别器的最小滑动距离为0。
2. 默认情况下，pinch是禁用的，可通过如下代码开启：

var pinchBox = $(".pinch-box"),
    mPinchBox = new Hammer(pinchBox.get(0));
mPinchBox.get("pinch").set({ enable: true });

相关值： e.scale；表示缩放的比例，为具体数值。pinchin时e.scale的值越来越小。反之pinchout时e.scale的值越来越大。当每次pinchstart时，e.scale都从1开始。
pinch的相关演示页面》

三、 press

定义 ： 长按；手指（或鼠标）按下没有任何移动，并且按压时间超过500ms后触发。
事件 ：

注意点： 触发press识别器的最小按压时间为500ms。

四、rotate

定义 ： 旋转；两（多）个手指（或鼠标，可通过模拟）旋转时触发（两个大拇指效果较佳）。

事件 ：

注意点 ：默认情况下，rotate是禁用的，可通过如下代码开启:

var rotateBox = $(".rotate-box"),
	mRotateBox = new Hammer(rotateBox.get(0));
mRotateBox.get("rotate").set({ enable: true });

相关值： rotation；表示旋转的值，参考单位为deg。顺时针旋转时e.rotation正递增，逆时针旋转时e.rotation负递增。当每次rotatestart时，e.rotation都从0开始。

五、swipe

定义 ： 快速滑动；手指（或鼠标）在上下左右方向快速移动时触发。

事件 ：

注意点 ：

1. 最小滑动距离为10，最小速度为0.65px/ms
2. 默认情况，纵向滑动是禁用的，可通过如下代码开启：

var swipeBox = $(".swipe-box"),
    mSwipeBox = new Hammer(swipeBox.get(0));
mSwipeBox.get("swipe").set({
    // direction: Hammer.DIRECTION_VERTICAL
    direction: Hammer.DIRECTION_ALL
});

相关值： velocityX 和 velocityY；表示滑动的速度，参考单位为px/ms。向右或向下滑动时速度为负数，反之，向左或向上滑动时速度为正数。并且滑动越快，这个速度越大。

六、tap

定义 ： 单击；单击屏幕，并且手指（或鼠标）在屏幕停留的时间不超过250ms时触发。

事件 ：

注意点： 单击时，按压时间不能超过250ms，移动距离不能超过2px。当双击时，两次单击的时间间隔不能超过300ms，移动距离不能超过10px。

七、recognizeWith & requireFailure

定义 ： recognizeWith ， 同时触发多个识别器。

定义 ： requireFailure ， 若一个识别器触发失败，则触发另外一个识别器 。比如 a.requireFailure(b); 触发了b，那么就不可能触发a。反之若a触发，则b就不能触发。一般而言，触发识别器b要在触发a的基础上。也就是说，requireFailure只能同时触发一个识别器。

八、enable

定义 ： 通过设置属性，来禁用识别器的运行。enable: false 为禁用，enable: true 为启用