簡(jiǎn)介

hammer.js是一個(gè)多點(diǎn)觸摸手勢(shì)庫(kù)，能夠?yàn)榫W(wǎng)頁(yè)添加多點(diǎn)觸摸事件，免去自己監(jiān)聽(tīng)底層touchstart、touchmove、touchend事件。hammer.js不但支持觸摸事件的瀏覽器，在桌面瀏覽器也能將鼠標(biāo)點(diǎn)擊事件當(dāng)做觸摸，方便開發(fā)人員進(jìn)行調(diào)試。

特點(diǎn)

不需要依賴任何其他的框架，并且整個(gè)框架非常小。

事件架構(gòu)

hammer.js主要對(duì)觸屏的六大事件進(jìn)行監(jiān)聽(tīng)。

1.pan事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指放下并移動(dòng)時(shí)間，即觸屏中的拖動(dòng)事件。這個(gè)事件在觸屏中比較常用。該事件還可以對(duì)以下事件進(jìn)行監(jiān)聽(tīng)并處理：
panstart拖動(dòng)開始、panmove拖動(dòng)過(guò)程、panend拖動(dòng)結(jié)束、pancancel拖動(dòng)取消、panleft向左拖動(dòng)、panright向右拖動(dòng)、panup向上拖動(dòng)、pandown向下拖動(dòng)。
2.pinch事件：在指定區(qū)域內(nèi)兩個(gè)手指（默認(rèn)）或多個(gè)手指相對(duì)移動(dòng)（越來(lái)越近）或相對(duì)移動(dòng)（越來(lái)越遠(yuǎn)）事件。該事件分別對(duì)以下事件進(jìn)行監(jiān)聽(tīng):
pinchstart多點(diǎn)觸控開始、pinchmove多點(diǎn)觸控過(guò)程、pinchend多點(diǎn)觸控結(jié)束、pinchcancel多點(diǎn)觸控取消、pinchin多點(diǎn)觸控手指靠近、pinchout多點(diǎn)觸控手指越來(lái)越遠(yuǎn)。
3.press事件：在指定的dom區(qū)域內(nèi)按壓，該事件不能包含移動(dòng)，最小按壓時(shí)間為500毫秒。常用于手機(jī)上的“復(fù)制、粘貼”等功能。該事件對(duì)以下事件進(jìn)行監(jiān)聽(tīng)處理：
pressup按壓事件離開時(shí)觸發(fā)
4.rotate事件：在指定的dom區(qū)域內(nèi)，當(dāng)兩個(gè)手指或更多手指呈圓形旋轉(zhuǎn)的時(shí)候觸發(fā)。該事件對(duì)以下事件進(jìn)行監(jiān)聽(tīng)：
rotatestart旋轉(zhuǎn)開始、rotatemove旋轉(zhuǎn)過(guò)程、rotateend旋轉(zhuǎn)結(jié)束、rotatecancel旋轉(zhuǎn)取消。
5.swipe事件：一個(gè)手指在屏幕上滑動(dòng)，即滑動(dòng)事件。該事件對(duì)以下事件進(jìn)行監(jiān)聽(tīng)：
Swipeleft：向左滑動(dòng)、Swiperight：向右滑動(dòng)、Swipeup：向上滑動(dòng)、Swipedown：向下滑動(dòng)。
6.tap事件：在指定dom事件區(qū)域內(nèi)，一個(gè)手指輕拍或點(diǎn)擊時(shí)觸發(fā)該事件(類似PC端的click)。該事件最大點(diǎn)擊時(shí)間為250毫秒，如果超過(guò)250毫秒則按Press事件進(jìn)行處理。

注意點(diǎn)

tap和click在安卓系統(tǒng)上可以同時(shí)觸發(fā)，但click事件會(huì)有幾百毫秒的延遲判斷是否是點(diǎn)擊事件，即tap事件先觸發(fā)，過(guò)一段時(shí)間在觸發(fā)click事件。

使用方法

<script>
//創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)，指定要處理的dom元素
var hammertime=new Hammer(document.getElementById('test'))
//為該dom元素添加指定的事件，如觸屏移動(dòng)事件
hammertime.on('pan',function(e){
    console.log(e)
})
</script>

rotate,pinch需要手動(dòng)添加事件監(jiān)聽(tīng)程序。

//如
 var hammertime = new Hammer(document.getElementById("test"));
 hammertime.add(new Hammer.rotate());
 hammertime.on("rotate",function(){.......})