原文地址：
http://www.cnblogs.com/well-nice/p/4891191.html
使用方法：
Hammer.js是一個開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標事件。
<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插件的形式調用
<script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>
$("#element")
.hammer({
// 對DOM進行一些初始化，這裏可以加入一些參數
})
.bind("tap", function(ev) {
console.log(ev);
});
1、 Pan事件：在指定的dom區域內，一個手指放下並移動事件，即觸屏中的拖動事件。這個事件在屏觸開發中比較常用，如：左拖動、右拖動等，如手要上使用QQ時向右滑動出現功能菜單的效果。該事件還可以分別對以下事件進行監聽並處理：
Panstart：拖動開始、Panmove：拖動過程、Panend：拖動結束、Pancancel：拖動取消、Panleft：向左拖動、Panright：向右拖動、Panup：向上拖動、Pandown：向下拖動
2、 Pinch事件：在指定的dom區域內，兩個手指（默認爲兩個手指，多指觸控需要單獨設置）或多個手指相對（越來越近）移動或相向（越來越遠）移動時事件。該事件事以分別對以下事件進行監聽並處理：
Pinchstart：多點觸控開始、Pinchmove：多點觸控過程、Pinchend：多點觸控結束、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離越來越近、Pinchout：多點觸控時兩手指距離越來越遠
3、 Press事件：在指定的dom區域內觸屏版本的點擊事件，這個事件相當於PC端的Click事件，該不能包含任何的移動，最小按壓時間爲500毫秒，常用於我們在手機上用的“複製、粘貼”等功能。該事件分別對以下事件進行監聽並處理：
Pressup：點擊事件離開時觸發
4、 Rotate事件：在指定的dom區域內，當兩個手指或更多手指成圓型旋轉時觸發（就像兩個手指擰螺絲一樣）。該事件分別對以下事件進行監聽並處理：
Rotatestart：旋轉開始、Rotatemove：旋轉過程、Rotateend：旋轉結束、Rotatecancel：旋轉取消
5、 Swipe事件：在指定的dom區域內，一個手指快速的在觸屏上滑動。即我們平時用到最多的滑動事件。
Swipeleft：向左滑動、Swiperight：向右滑動、Swipeup：向上滑動、Swipedown：向下滑動
6、Tap事件：在指定的dom區域內，一個手指輕拍或點擊時觸發該事件(類似PC端的click)。該事件最大點擊時間爲250毫秒，如果超過250毫秒則按Press事件進行處理。