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

 

 

 

 

 

 

 

 

 

一、引入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事件）

選項	默認	描述
event	pan	事件名稱
pointers	1	必需指針。0為所有指針。
threshold	10	識別前需要的最小平移距離
direction	DIRECTION_ALL	平移方向。

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

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

選項	默認	描述
event	pinch	事件名稱
pointers	2	必需的指針，最小為2。
threshold	0	識別前的最小比例

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

3.按壓(長按)事件

選項	默認	描述
event	press	事件名稱
pointers	1	必需指針。0為所有指針。
threshold	9	按壓時允許的最小移動。
time	251	壓縮時間以毫秒為單位

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

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

選項	默認	描述
event	rotate	事件名稱
pointers	2	必需的指針，最小為2。
threshold	0	識別前的最小比例

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

5.滑屏事件

選項	默認	描述
event	rotate	事件名稱
pointers	1	必需的指針，最小為2。
threshold	10	識別前需要的最小距離。
direction	DIRECTION_ALL	平移方向。
velocity	0.3	識別之前所需的最小速度，單位為px / ms。

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

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

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

 

6.tap點擊事件

選項	默認	描述
event	tap	事件名稱
pointers	1	必需的指針
taps	1	所需的水龍頭數量。
interval	300	多個水龍頭之間的最大時間（以ms為單位）
time	250	最大按壓時間（ms）。
threshold	2	在做點擊時，允許一些小動作。
posThreshold	10	多個抽頭之間的最大位置差異。

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觸發的所有事件都會接收到包含以下屬性的事件對象。

名稱	值
type	事件名稱 像panstart。
deltaX	X軸的移動。
deltaY	Y軸運動。
deltaTime	自第一次輸入以來的總時間（毫秒）。
distance	距離移動
angle	角度移動。
velocityX	速度在X軸上，以px / ms為單位。
velocityY	Y軸上的速度，以px / ms為單位
velocity	Y軸上的速度，以px / ms為單位
direction	方向移動。匹配DIRECTION常數。
offsetDirection	方向從起點移開。匹配DIRECTION常數。
scale	多點觸控時縮放。1單觸。
rotation	多點觸摸時已經完成的旋轉（deg）。0單擊。
center	多點觸摸的中心位置，或只是單指針。
srcEvent	源事件對象，類型TouchEvent，MouseEvent或PointerEvent。
target	接收到事件的目標。
pointerType	主指針類型，可以是touch，mouse，pen或kinect。
eventType	事件類型，匹配INPUT常量。
isFirst	true 當第一個輸入。
isFinal	true 當最后（最后）輸入。
pointers	具有所有指針的數組，包括結束指針（touchend，mouseup）。
changedPointers	具有所有新/移動/丟失指針的數組。
preventDefault	參考srcEvent.preventDefault()方法。只有專家！