hammer.js是一個多點觸摸手勢庫，能夠為網頁加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多點觸摸事件，免去自己監聽底層touchstart、touchmove、touchend事件並且寫一大堆判斷邏輯的痛苦。hammer.js不但支持觸摸屏設備的瀏覽器，在桌面瀏覽器上，也能將鼠標的點擊當做觸摸，方便開發人員在桌面瀏覽器上調試。這是一個專為觸摸手勢而生的js庫，對有需要的朋友非常有幫助，奉上常用的一些方法調用文檔。
使用方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 先要對監聽的DOM進行一些初始化
var
hammer =
new
Hammer(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
|
$(
"#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）