简介
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(){.......})