hammer.js – 多点触摸手势库
hammer.js 是一个多点触摸手势库，能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。
hammer.js 不但支持触摸屏设备的浏览器，在桌面浏览器上，也能将鼠标的点击当做触摸，方便开发人员在桌面浏览器上调试。（JS仔在自己的随手背项目里面也用了hammer.js，真心好用）
使用方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>
// 先要对监听的DOM进行一些初始化
varhammer=newHammer(document.getElementById("container"));
// 然后加入相应的回调函数即可
hammer.ondragstart=function(ev){}; // 开始拖动
hammer.ondrag=function(ev){};// 拖动中
hammer.ondragend=function(ev){};// 拖动结束
hammer.onswipe=function(ev){};// 滑动
hammer.ontap=function(ev){};// 单击
hammer.ondoubletap=function(ev){};//双击
hammer.onhold=function(ev){};// 长按
hammer.ontransformstart=function(ev){};// 双指收张开始
hammer.ontransform=function(ev){};// 双指收张中
hammer.ontransformend=function(ev){};// 双指收张结束
hammer.onrelease=function(ev){};// 手指离开屏幕
|
还支持jQuery插件的形式调用
|
1
2
3
4
5
6
7
8
9
|
<script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>
$("#element")
.hammer({
// 对DOM进行一些初始化，这里可以加入一些参数
})
.bind("tap",function(ev){
console.log(ev);
});
|
官网地址：http://eightmedia.github.com/hammer.js/ （带演示）
源码地址：https://github.com/EightMedia/hammer.js
文件大小： 23K（源码）、6K（minified）
