hammer.js學習

官網地址：http://eightmedia.github.com/hammer.js/  
源碼地址：https://github.com/EightMedia/hammer.js

hammer.js主要針對觸屏的6大事件進行監聽。

一、  Pan事件：在指定的dom區域內，一個手指放下並移動事件，即觸屏中的拖動事件。這個事件在屏觸開發中比較經常使用，如：左拖動、右拖動等，如手要上使用QQ時向右滑動出現功能菜單的效果。該事件還能夠分別對如下事件進行監聽並處理：

Panstart：拖動開始、Panmove：拖動過程、Panend：拖動結束、Pancancel：拖動取消、Panleft：向左拖動、Panright：向右拖動、Panup：向上拖動、Pandown：向下拖動

二、  Pinch事件：在指定的dom區域內，兩個手指（默認爲兩個手指，多指觸控須要單獨設置）或多個手指相對（愈來愈近）移動或相向（愈來愈遠）移動時事件。該事件事以分別對如下事件進行監聽並處理：

Pinchstart：多點觸控開始、Pinchmove：多點觸控過程、Pinchend：多點觸控結束、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離愈來愈近、Pinchout：多點觸控時兩手指距離愈來愈遠

三、  Press事件：在指定的dom區域內觸屏版本的點擊事件，這個事件至關於PC端的Click事件，該不能包含任何的移動，最小按壓時間爲500毫秒，經常使用於咱們在手機上用的「複製、粘貼」等功能。該事件分別對如下事件進行監聽並處理：

Pressup：點擊事件離開時觸發

四、  Rotate事件：在指定的dom區域內，當兩個手指或更多手指成圓型旋轉時觸發（就像兩個手指擰螺絲同樣）。該事件分別對如下事件進行監聽並處理：

Rotatestart：旋轉開始、Rotatemove：旋轉過程、Rotateend：旋轉結束、Rotatecancel：旋轉取消

五、  Swipe事件：在指定的dom區域內，一個手指快速的在觸屏上滑動。即咱們平時用到最多的滑動事件。

Swipeleft：向左滑動、Swiperight：向右滑動、Swipeup：向上滑動、Swipedown：向下滑動

六、Tap事件：在指定的dom區域內，一個手指輕拍或點擊時觸發該事件(相似PC端的click)。該事件最大點擊時間爲250毫秒，若是超過250毫秒則按Press事件進行處理。

 

經驗分享：寫到這個事件的時候有人必然要問了，在觸屏中咱們使用Click事件不也能夠嗎？這個Tap事件與Click事件有什麼區別呢？博主也曾經有過這樣的疑惑，起初在觸屏上處理點擊的時候也一直用的click事件，而且沒也有出現任何問題，直到有一天爲一個公司作了微信版本的「連連看」小遊戲，連連看的業務簡單來講就是屏幕上有不少圖片，當點擊兩個相同圖案的圖片時能夠在中間產生鏈接線，而且產生爆破效果後消失。這個遊戲剛開始作的時候是在ff瀏覽器上作的測試，鼠標點擊後效果很是流暢，但當遊戲部署到服務器上並用手機端操做時，iphone和wp都很是流暢，安卓下無論怎麼調都是有卡頓。起初覺得是手機性能的問題，但換了高配手機後仍然會有卡頓，遊戲也不是不能玩，就是反應慢。通過屢次的測試後排除了手機配置的硬件緣由，開始懷疑click事件。通過網上查閱後才得知，在安卓觸屏上，Tap事件和click事件能夠同時觸發，但click事件會有幾百毫秒的延遲，即先觸發Tap事件，過一段時間再觸發click事件。後來把遊戲的全部click事件修改爲Tap事件問題就天然解決了。