hammer.js是一款开源的移动端脚本框架, 如:点击、滑动、拖动、多点触控等事件。 不需要依赖任何其他的框架,并且整个框架非常小
1、pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件。 如:左拖动、右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果。 该事件还可以分别对以下事件进行监听并处理:
panstart: 拖动开始 panmove: 拖动过程 panend: 拖动结束 pancancel: 拖动取消 panleft: 向左拖动 panright: 向右拖动 panup: 向上拖动 pandown: 向下拖动
2、pinch事件:在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时事件。 该事件事以分别对以下事件进行监听并处理:
pinchstart:多点触控开始
pinchmove: 多点触控过程
pinchend: 多点触控结束
pinchcancel 多点触控取消
pinchin: 多点触控时两手指距离越来越近
pinchout: 多点触控时两手指距离越来越远
3、press事件:在指定的dom区域内触屏版本的点击事件,这个事件相当于PC端的Click事件, 不能包含任何的移动,最小按压时间为500毫秒,常用于我们在手机上用的“复制、粘贴”等功能。 该事件分别对以下事件进行监听并处理:
pressup:点击事件离开时触发
4、rotate事件:在指定的dom区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样)。 该事件分别对以下事件进行监听并处理:
rotatestart: 旋转开始
rotatemove: 旋转过程
rotateend: 旋转结束
rotatecancel:旋转取消
5、swipe事件:在指定的dom区域内,一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。
swipeleft: 向左滑动
swiperight:向右滑动
swipeup: 向上滑动
swipedown: 向下滑动
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById(""));
//添加事件
hammertime.on("tap", function (e) {
console.log(e);
});
这六个事件是有区别的: 在Pinch事件和Rotate事件中,并没有对Pinch和Rotate事件进行监听,使用前需要先做一步 hammertime.add(new Hammer.Pinch()); hammertime.add(new Hammer.Rotate ()); 而其他四个事件没有用,直接添加了事件的监听程序