跳至主要内容

[note] hammer-js 筆記

筆記​

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

碰到同時觸發的事件​

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

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);
});