Hammer.js 移動裝置觸控手勢js庫

一喵嗚發表於2014-09-12
JS

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
<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>
 
// 先要對監聽的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
<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）

相關文章