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

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

一、pan

定义 : 平移;手指(或鼠标)按下,拖动页面触发。
事件
pan pan所有事件的集合
panstart 平移开始
panmove 平移过程
panend 平移结束
pancancel
panleft 向左平移
panright 向右平移
panup 向上平移
pandown 向下平移
注意点
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

定义 : 缩放;多个手指(或鼠标,可通过模拟)相向或反相移动时触发。
事件
pinch pinch所有事件的集合
pinchstart 缩放开始
pinchmove 缩放过程
pinchend 缩放结束
pinchcancel
pinchin 靠近缩放
pinchout 远离缩放
注意点
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 按压开始
pressup 按压抬起
注意点 : 触发press识别器的最小按压时间为500ms。
press的相关演示页面》

四、rotate

定义 : 旋转;两(多)个手指(或鼠标,可通过模拟)旋转时触发(两个大拇指效果较佳)。
事件
rotate rotate所有事件的集合
rotatestart 旋转开始
rotatemove 旋转过程
rotateend 旋转结束
rotatecancel
注意点 :默认情况下,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开始。
rotate的相关演示页面》

五、swipe

定义 : 快速滑动;手指(或鼠标)在上下左右方向快速移动时触发。
事件
swipe swipe所有事件的集合
swipeleft 向左快速滑动
swiperight 向右快速滑动
swipeup 向上快速滑动
swipedown 向下快速滑动
注意点
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。向右或向下滑动时速度为负数,反之,向左或向上滑动时速度为正数。并且滑动越快,这个速度越大。
swipe的相关演示页面》

六、tap

定义 : 单击;单击屏幕,并且手指(或鼠标)在屏幕停留的时间不超过250ms时触发。
事件
tap 单击
doubletap 双击
注意点 : 单击时,按压时间不能超过250ms,移动距离不能超过2px。当双击时,两次单击的时间间隔不能超过300ms,移动距离不能超过10px。
tap的相关演示页面》

七、recognizeWith & requireFailure

定义 : recognizeWith , 同时触发多个识别器。
定义 : requireFailure , 若一个识别器触发失败,则触发另外一个识别器 。比如 a.requireFailure(b); 触发了b,那么就不可能触发a。反之若a触发,则b就不能触发。一般而言,触发识别器b要在触发a的基础上。也就是说,requireFailure只能同时触发一个识别器
recognizeWith & requireFailure的相关演示页面》

八、enable

定义 : 通过设置属性,来禁用识别器的运行。enable: false 为禁用,enable: true 为启用
enable的相关演示页面》

评论功能已关闭。