前言：本人對hammer了解不是很多，早做項目時遇到了手機端的一些滑動事件，特此分析下hammer的某些屬性。

hammer.js是一款開源的移動端腳本框架，他可以完美的實現(xiàn)在移端開發(fā)的大多數(shù)事件，如：點擊、滑動、拖動、多點觸控等事件。Hammer.js不需要依賴任何其他的js框架，并且整個框架非常小，v2.0.4版本只有3.96kb。

1、hammer.js引用

可直接引入文件，也可以引入CDN地址。在這里，為了方便，我引入了JQuery框架。

hammer的在線CDN地址為：<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>

2.hammer的事件綁定

hammer的事件綁定方法是新建一個Hammer對象，并傳入要操作的DOM，必須使用原始DOM，即使用這兩種方法獲取DOM。

    var hammerObj=new Hammer(document.getElementById('main'));
    var hammerObj=new Hammer($('#main').get(0));

3、hammer支持的事件

pan事件

主要支持在當(dāng)前dom區(qū)域內(nèi)的一個手指放下并移動事件，即屏幕滑動事件，其中包括左滑動、右滑動、上滑動、下滑動，該事件還可以對以下事件進行監(jiān)聽或處理：

panstart：拖動開始、panmove：拖動過程、panend：拖動結(jié)束、pancancel：拖動取消、panleft：向左拖動、panright：向右拖動、panup：向上拖動、pandown：向下拖動

panstart事件

會在event對象中輸出滑動開始的坐標(biāo)

panmove事件

一次滑動會觸發(fā)多次panmove事件，會在direction中輸出方向，當(dāng)direction等于16時，為向下滑動，當(dāng)direction等于8時，為向上滑動，當(dāng)direction等于4時，為向右滑動，當(dāng)direction等于2時，為向左滑動。

panend事件

滑動結(jié)束，一次滑動只會執(zhí)行一次，同樣在direction中輸出方向，當(dāng)direction等于16時，為向下滑動，當(dāng)direction等于8時，為向上滑動，當(dāng)direction等于4時，為向右滑動，當(dāng)direction等于2時，為向左滑動。

pancancel事件

滑動取消，不知道何時觸發(fā)。

panleft事件

向左滑動，一次滑動多次觸發(fā)，其中垂直上下滑動不會觸發(fā)，滑動時向左有一定偏移量的時候會觸發(fā)。

panright事件

向右滑動，一次滑動多次觸發(fā)，其中垂直上下滑動不會觸發(fā)，滑動時向右有一定偏移量的時候會觸發(fā)。

panup事件

向上滑動，一次滑動多次觸發(fā)，其中水平左右滑動不會觸發(fā)，滑動時向上有一定偏移量的時候會觸發(fā)。

pandown事件

向下滑動，一次滑動多次觸發(fā)，其中水平左右滑動不會觸發(fā)，滑動時向下有一定偏移量的時候會觸發(fā)。

pinch事件

主要支持在當(dāng)前dom區(qū)域內(nèi)的多個手指（默認(rèn)兩個手指，多個手指需要單獨設(shè)置）的相對移動和相向移動，該事件還可以對以下事件進行處理或者監(jiān)聽：

pinchstart：多點觸控開始、pinchmove：多點觸控過程、pinchend：多點觸控結(jié)束、pinchcancel：多點觸控取消、pinchin：多點觸控時兩手指距離越來越近(縮小)、pinchout：多點觸控時兩手指距離越來越遠(yuǎn)（放大），其觸發(fā)事件如pan事件。

    var hammertime = new Hammer(document.getElementById("body"));
    hammertime.add(new Hammer.Pinch());
    hammertime.on("pinchin", function (e) {
        swit();
    });

Press事件（長按）

主要支持在當(dāng)前的dom區(qū)域內(nèi)觸屏版本的點擊事件，這個事件相當(dāng)于PC端的Click事件，該不能包含任何的移動，最小按壓時間為500毫秒，常用于我們在手機上用的“復(fù)制、粘貼”等功能，該事件分別對以下事件進行監(jiān)聽并處理：

pressup：按壓事件離開時觸發(fā)

該事件不存在pressdown事件，具體是否支持按壓開始未知。

rotate事件

主要支持在當(dāng)前的dom區(qū)域內(nèi)，當(dāng)兩個手指或更多手指成圓型旋轉(zhuǎn)時觸發(fā)（就像兩個手指擰螺絲一樣）。該事件分別對以下事件進行監(jiān)聽并處理：

rotatestart：旋轉(zhuǎn)開始、rotatemove：旋轉(zhuǎn)過程、rotateend：旋轉(zhuǎn)結(jié)束、rotatecancel：旋轉(zhuǎn)取消

swipe事件

主要支持在當(dāng)前的dom區(qū)域內(nèi)，一個手指快速的在觸屏上滑動。即我們平時用到最多的滑動事件。

swipeleft：向左滑動、swiperight：向右滑動、swipeup：向上滑動、swipedown：向下滑動

該事件只有在垂直上下滑動或水平左右滑動時觸發(fā)，即滑動時如果傾斜太大角度則不會觸發(fā)，觸發(fā)條件比較苛刻。

tap事件

主要支持在當(dāng)前的dom區(qū)域內(nèi)，一個手指輕拍或點擊時觸發(fā)該事件(類似PC端的click)。該事件最大點擊時間為250毫秒，如果超過250毫秒則按Press事件進行處理。

注意

默認(rèn)情況下pinch和rotate事件是被禁止的，可以通過以下代碼開啟它。

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

一般情況下，瀏覽器是禁止屏幕上滑下滑事件的，因為瀏覽器默認(rèn)的是上下滑動滾動頁面，若要允許識別器識別垂直方位或全部方位的 pan 和 swipe，可以這么寫：

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

另建議加上如下meta標(biāo)簽，防止doubletap 或 pinch 縮放了viewport：

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

4、hammer滑動事件執(zhí)行多次處理方法

在滑動事件執(zhí)行后，我們一般會執(zhí)行一個函數(shù)或者對dom進行操作，hammer事件多次執(zhí)行，有時候會使函數(shù)多次執(zhí)行或多次dom操作，由于我現(xiàn)在做的項目滑動之后執(zhí)行的操作是需要一段時間的，所以采用設(shè)置一個全局變量作為函數(shù)執(zhí)行開關(guān)的方法進行阻止，hammer應(yīng)該提供了自己的方法，但我還不知道，望知道的小伙伴可以告訴我。

 1 <script type="text/javascript">
 2     var hammerObj=new Hammer(document.getElementById('main'));
 3     var _clock=true;
 4     function foo(){
 5         alert("OK");
 6         _clock=true;
 7     }
 8     hammerObj.on('panmove',function(event){
 9         if(_clock){
10             _clock=false;
11             foo();
12         }
13     });
14 </script>

但是這種方法只有在滑動后執(zhí)行函數(shù)或操作存在一定時間才可以，比如alert()換成console.log（）就會多次輸出，沒有辦法解決這個問題。

其實pan事件我們完全不需要使用panmove來實現(xiàn)，可以采用panend,同樣可以輸出不同方向然后進行判斷，但pinchin（捏合）事件同樣會多次執(zhí)行，所以新的方法還需要尋找。。。

　　

　　　　

　　　　

總結(jié)

以上是生活随笔為你收集整理的hammer的初始化及移动端各种滑动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。