移動端手勢庫hammer.js

Github

Hammer.js是一個開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標事件。

使用

引入hammer.js到文件中，並創建一個新的實例：

var hammer = new Hammer(Element, Options);
hammer.on('tap', function(ev) {
    console.log(ev);
});

hammerjs內置多種手勢識別器，包括
- tap：輕觸，與click相比有300ms的延遲
- doubletap：雙點擊
- press：按住,最小按壓時間爲500毫秒
- pan：拖動平移
- panstart：拖動開始
- panmove：拖動過程
- panend：拖動結束
- pancancel：拖動取消
- panleft：向左拖動
- panright：向右拖動
- panup：向上拖動
- pandown：向下拖動
- swipe：快速滑動
- swipeleft：向左滑動
- swiperight：向右滑動
- swipeup：向上滑動
- swipedown：向下滑動
- pinch：多觸點捏放
- pinchstart：多點觸控開始
- pinchmove：多點觸控過程
- pinchend：多點觸控結束
- pinchcancel：多點觸控取消
- pinchin：多點觸控時兩手指距離越來越近
- pinchout：多點觸控時兩手指距離越來越遠
- rotate：旋轉識別器
- rotatestart：旋轉開始
- rotatemove：旋轉過程
- rotateend：旋轉結束
- rotatecancel：旋轉取消

其中 pinch 和 rotate 默認是不可用的，想啓用它們，需要加上：

hammer.get('pinch').set({ enable: true });
hammer.get('rotate').set({ enable: true });

pan 和 swipe默認只識別水平方位的手勢，若要允許識別器識別垂直方位或全部方位的 pan 和 swipe，可以這麼寫：

hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammer.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

另建議加上如下meta標籤，防止doubletap 或 pinch 縮放了viewport：

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

事件對象

每一個Hammer觸發的事件都會收到一個包含了如下屬性的事件對象：

on(events, handler) 和 .off(events, [handler])

監聽由被添加的識別器觸發的事件，或者移除那些綁定了的事件。參數中將事件通過空格隔開可處理多個事件

在jQuery基礎上使用

$("#element").hammer({
    // 對DOM進行一些初始化，這裏可以加入一些參數
   })
   .on("tap", function(ev) {
        console.log(ev);
   });