hammer.js – 为网站添加触摸事件支持

切版网专注网页切版服务


在我们一个h5项目中,有个效果是锁屏,需要嘴巴亲吻才能解锁,我们肯定没有办法做到真正的嘴巴亲吻,但是我们可以监控触摸点,如果是2个触摸点则判断是嘴巴亲吻,那么我们就要用到hammer.js,它弥补了jquerymobile的不足,提供了更多的移动端触摸事件监控的支持。
在hammer.js框架当中,为我们提供的几个方法是:
Pan   单指 触碰(可以进行轻微的摩擦)  一个手指就能够触发 阈值10
包含了panstart、panmove、panend、pancancel、panleft、panright、panup、pandown
Pinch 两个手指头  捏~ 在识别之前最小的值是0
包含了pinchstart、pinchmove、pinchend、pinchcancel、pinchin (用于缩小)、pinchout (用于放大)
Press 单指 长按 500毫秒以上才可以 运动最小距离5 只有press事件
Rotate 两只手指头 默认旋转角度0
包含了rotatestart、rotatemove、rotateend、rotatecancel
Swipe 单指 滑动 阈值10 大于0.65px/ms的速度才可以触发
包含了swipeleft、swiperight、swipeup、swipedown
Tap 两下的轻敲 两次的差异在10之内 间隔在300毫秒之内 一次按下的时间不大于250ms 才可以触发
 
基本的使用方法:
引入hammer.min.js文件
为需要增加手势功能的元素/标签,进行实例化,在默认情况下,仅仅增加了水平方向上的识别功能

var mc = new Hammer(ele);

之后需要让在垂直方向上也能够识别pan的事件

mc.get(‘pan’).set({ direction: Hammer.DIRECTION_ALL });

(注意:测试中没有什么差别-测试机器:iPhone5S、Android4.0、Android4.2)
最后绑定事件,并执行相应功能即可
mc.on(“panleft panright panup pandown tap press”, function(e) {
    wrap.textContent = e.type +” gesture detected.”;
});
使用谷歌浏览器打印出参数event的内容,如下:
qb2
免费索取报价