Skip to main content

[note] hammer-js 筆記

筆記#

  • Pointer: 每 new 一個 Hammer() 就稱做一個 Pointer
  • Recognizer:Hammer.pan() 這種稱作 Recognizer
  • Manager: new Hammer.Manage(element) ,它和 new Hammer() 一樣,但是不會有預設的 Recognizer
  • 透過 .add() 把事件給 Manager 時,不同的順序會有影響,陣列中前者會先被偵測(放前面比較容易被偵測)。因此在放的時候會把最不容易被觸發的放在陣列前面
  • 如果用引號,會去抓事件名稱;如果沒用引號,則是抓變數名稱。
  • recognizeWithrequireFailure 使用時,前後順序的影響不大。

碰到同時觸發的事件#

當碰到可能會同時觸發的事件時(例如 tripleTap, doubleTap 和 singleTap),若有需要,則可進一步使用 recognizeWithrequireFailure 設定。

recognizeWith#

透過recognizeWith可以同時觸發兩個事件,前後順序的影響不大

pinch.recognizeWith(rotate); // 觸發 pinch 的時候可以同時觸發 rotate

requireFailure#

透過requireFailure可以避免同時觸發兩個事件

tripleTap.requireFailure(doubleTap); // 觸發 tripleTap 時不會同時觸發 doubleTap
tripleTap.requireFailure(singleTap, doubleTap); // 觸發 tripleTap 時不會同時觸發 doubleTap 和 singleTap

使用#

直接使用 Hammer()#

Basic with vertical Pan recognizer

var myElement = document.getElementById('myElement');
// 透過 Hammer() 的方式建立一個簡單的實例
var mc = new Hammer(myElement);
// 透過 Hammer() 的方式預設 Pan 和 Swipe 只偵測水平手勢
// 需透過 get 來修改預設值
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
// 監聽想監聽的是件
mc.on('panleft panright panup pandown tap press', function (ev) {
myElement.textContent = ev.type + ' gesture detected.';
});

使用 Manager 的方式#

RecognizeWith with Pinch and Rotate

var myElement = document.getElementById('myElement');
// 建立 Manager
// 這樣的方法和 Hammer() 一樣,但是沒有預設的 Recognizers
var mc = new Hammer.Manager(myElement);
// 建立Recognizer
var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotate();
// 使用 recognizeWith 或 requireFailure(順序不太有影響)
// 同時觸發 pinch 和 rotate 這兩個事件(如果沒有寫 recognizeWith 則雖然同時偵測但一次只會觸發一個事件)
pinch.recognizeWith(rotate);
// 把事件 add 給 Manager(順序有影響)
//(如果沒把有 Recognizer 給 Manager,則 on 上去也監聽不到)
mc.add([pinch, rotate]);
// 讓 Manager 監聽事件
// (如果把 Recognizer 有 add 給 Manager 但是沒 on 上去也監聽不到)
mc.on('pinch rotate', function (ev) {
console.log(ev.type);
});

使用 recognizeWith#

RecognizeWith with a Quadrupletap recognizer

var myElement = document.getElementById('myElement');
// 建立 Manager
var mc = new Hammer.Manager(myElement);
// 增加兩個 Recognizer
var tap = new Hammer.Tap();
// event 的名稱可以自訂,但是要對應到 mc.on('eventName') 裡面的 eventName
var quadrupletap = new Hammer.Tap({ event: 'quadrupletap', taps: 4 });
// 透過 add ,把 Recognizer 給 Manager
mc.add([tap, quadrupletap]);
// 我們希望能同時觸發兩個事件,如果沒寫這行,只會觸發出 tap 事件
// 這行的意思是,即使 singletap 被觸發的情況下 quadrupletap 還是會被觸發
mc.get('quadrupletap').recognizeWith(tap);
// 也可以寫 quadrupletap.recognizeWith(tap)
mc.on('tap quadrupletap', function (ev) {
console.log(ev.type);
});

使用 requireFailure#

SingleTap and DoubleTap (with recognizeWith/requireFailure)

var myElement = document.getElementById('myElement');
// 建立 Manager
var mc = new Hammer.Manager(myElement);
// 建立 Recognizer
var singleTap = new Hammer.Tap({
event: 'singletap',
});
var doubleTap = new Hammer.Tap({
event: 'doubletap',
taps: 2,
});
var tripleTap = new Hammer.Tap({
event: 'tripletap',
taps: 3,
});
// 把 Recognizer 給 Manager
// 可以透過 recognizeWith 和 requireFailure 來控制
mc.add([tripleTap, doubleTap, singleTap]); // 寫這樣三個事件都能被監測
// mc.add([singleTap, doubleTap, tripleTap]); // 寫這樣只會偵測到 singleTap
// mc.get('doubletap').requireFailure('singletap'); // doubletap 被觸發時不會同時觸發 singletap
// doubleTap.requireFailure(tripleTap); // tripleTap 被觸發時不會同時觸發 doubleTap
singleTap.requireFailure([tripleTap, doubleTap]); // tripleTap 被觸發時,singleTap 和 doubleTap 都不會被觸發
mc.on('singletap doubletap tripletap', function (ev) {
console.log(ev.type);
});
Last updated on