一、引入hammer.JS

1.下載地址：http://download.csdn.net/detail/webxiaoma/9872249
2.官網地址：http://hammerjs.github.io/examples/
3.CDN鏈接：http://hammerjs.github.io/dist/hammer.min.js

二、用法

1.首先我們先寫一個出發事件的DOM元素

HTML:

   <style type="text/css">
       html, body {
           width: 100%;
           height: 100%;
           margin: 0px;
           padding: 0px;
       }

       .test {
           width: 100%;
           height: 100%;
           background: red;
           text-align: left;
           color:white;
       }

   </style>
  <div id="test" class="test"></div>
 

2.我們創建一個新的hammer對象並且在初始化時指定要處理的dom元素

var hammertime = new Hammer(document.getElementById("test"));

3.為該dom元素指定觸屏移動事件

hammertime.on("press", function (e) {                    document.getElementById("result").innerHTML += "按壓超過500ms了";

});

三、註意點 重點內容

1.推薦使用視口元標記，通過禁用雙引號/縮小縮放功能，可以更好地控制網頁。

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
 

2.水平 pan和swipe和多點觸控pinch和rotate識別。默認情況下，壓縮和旋轉識別器將被禁用，因為它們會使元素阻塞，但您可以通過調用以下方式啟用它們：
①方法一：

 hammertime.add(new Hammer.Pinch());
 hammertime.add(new Hammer.Rotate());

②方法二：

hammertime.get(‘pinch‘).set({ enable: true });
hammertime.get(‘rotate‘).set({ enable: true });

//啟用pan和swipe識別器的垂直方向或全方向：
hammertime.get(‘pan‘).set({ direction: Hammer.DIRECTION_ALL });
hammertime.get(‘swipe‘).set({ direction: Hammer.DIRECTION_VERTICAL });
 

啟用成功後在去調用該事件，否則該事件可能不會觸發。
另外我們也可以使用 remove(事件) 移除某個事件

hammertime.remove(‘rotate‘); // 移除旋轉手勢事件

四、提供的事件

1、點擊事件（也就是常說的tocuh事件）

panstart 單手指按下時事件
panmove 單手指移動時事件
panend 單手指離開時事件
pancancel 手勢事件被移除是觸發
panleft 單手指向下左滑動時觸發
panright 單手指向右滑動時觸發
panup 單手指向上滑動時觸發
pandown 單手指向下滑動時觸發

2.縮放事件 （需要手動開啟 ammertime.get(‘pinch‘).set({ enable: true });）

pinch 手指縮放觸發
pinchstart 手指縮放開始時觸發
pinchmove 手指縮放時觸發
pinchend 手指縮放結束後觸發
pinchcancel 手指縮放事件被清除時觸發
pinchin 手指向內縮放時觸發
pinchout 手指向外縮放時觸發

3.按壓(長按)事件

press 手指按壓時觸發（默認按壓251毫秒）
pressup 手指按壓結束時觸發

4.旋轉事件 (兩個手指)

rotate 旋轉觸發
rotatestart 旋轉開始時觸發
rotatemove 旋轉時觸發
rotateend 旋轉結束時觸發
rotatecancel 旋轉被移除時觸發

5.滑屏事件

swipe 滑屏觸發
swipeleft 左滑屏時觸發
swiperight 右滑屏時觸發
swipeup 上滑屏時觸發
swipedown 下滑屏時觸發

小提示：當調用Hammer()創建一個簡單的實例時，平移和滑動識別器被配置為僅檢測水平手勢。你需要這樣去在垂直方向去配置：

hammertime.get(‘swipe‘).set({ direction: Hammer.DIRECTION_ALL });

6.tap點擊事件

tap 點擊事件
doubletap 雙擊觸發

重點內容
以上事件中我們可以改變事件的默認狀態，比如按壓事件默認是251毫秒觸發，我們可以改為1s後觸發。

hammertime.get(‘press‘).set({ time:1000 });

五、事件對象

每個事件都存在事件對象：

hammertime.on("doubletap", function (e) {

   document.getElementById("result").innerHTML += e;
     var a = console.log(e);

});

事件對象中包含以下信息：
Hammer觸發的所有事件都會接收到包含以下屬性的事件對象。

移動端手勢事件 hammer.JS插件