简介
hammer.js是一个多点触摸手势库，能够为网页添加多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件。hammer.js不但支持触摸事件的浏览器，在桌面浏览器也能将鼠标点击事件当做触摸，方便开发人员进行调试。
特点
不需要依赖任何其他的框架，并且整个框架非常小。
事件架构
hammer.js主要对触屏的六大事件进行监听。
1.
pan事件：在指定的dom区域内，一个手指放下并移动时间，即触屏中的拖动事件。这个事件在触屏中比较常用。该事件还可以对以下事件进行监听并处理：
panstart拖动开始、panmove拖动过程、panend拖动结束、pancancel拖动取消、panleft向左拖动、panright向右拖动、panup向上拖动、pandown向下拖动。
2.pinch事件：在指定区域内两个手指（默认）或多个手指相对移动（越来越近）或相对移动（越来越远）事件。该事件分别对以下事件进行监听:
pinchstart多点触控开始、pinchmove多点触控过程、pinchend多点触控结束、pinchcancel多点触控取消、pinchin多点触控手指靠近、pinchout多点触控手指越来越远。
3.press事件：在指定的dom区域内按压，该事件不能包含移动，最小按压时间为500毫秒。常用于手机上的“复制、粘贴”等功能。该事件对以下事件进行监听处理：
pressup按压事件离开时触发
4.rotate事件：在指定的dom区域内，当两个手指或更多手指呈圆形旋转的时候触发。该事件对以下事件进行监听：
rotatestart旋转开始、rotatemove旋转过程、rotateend旋转结束、rotatecancel旋转取消。
5.swipe事件：一个手指在屏幕上滑动，即滑动事件。该事件对以下事件进行监听：
Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动。
6.tap事件：在指定dom事件区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。
注意点
tap和click在安卓系统上可以同时触发，但click事件会有几百毫秒的延迟判断是否是点击事件，即tap事件先触发，过一段时间在触发click事件。
使用方法
<script>
//创建一个新的hammer对象并且在初始化时，指定要处理的dom元素
var hammertime=new Hammer(document.getElementById('test'))
//为该dom元素添加指定的事件，如触屏移动事件
hammertime.on('pan',function(e){
console.log(e)
})
</script>
rotate,pinch需要手动添加事件监听程序。
//如
var hammertime = new Hammer(document.getElementById("test"));
hammertime.add(new Hammer.rotate());
hammertime.on("rotate",function(){.......})
网友评论