Hammer.js 移動裝置觸摸手勢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）