hammer.js的雙指點擊Tap事件如何識別及衝突解決

要識別hammer.js的雙指點擊事件，我們知道可以增加一個識別器：

<code>var tap2 = new Hammer.Tap({event:'tap2',pointers:2});/<code>

如果只有這麼一個識別器，那麼工作起來是沒問題的。但是當我們加上rotate後，就會出現問題了。tap2事件不觸發了！

實際上，在hammer的多指操作中，不同識別器默認是不能同時識別多個事件的。這時候我們要使用recognizeWith使輸入類似的操作能夠同時識別。如下所示：

<code>rotate.recognizeWith(tap2);
pinch.recognizeWith([tap2,rotate]);/<code>

完整代碼如下，可使單指Tap/雙指Tap/旋轉/縮放/滑動/拖動能夠同時觸發。

這時候可能要處理Tap2和rotateend時在業務上的衝突，但至少事件給觸發到了。

<code>var hmObj = new Hammer(cvsObj.obj,{touchAction: 'pan-x pan-y'});
var tap2 = new Hammer.Tap({event:'tap2',pointers:2});
var rotate = new Hammer.Rotate();
var pinch = new Hammer.Pinch();
rotate.recognizeWith(tap2);
pinch.recognizeWith([tap2,rotate]);
hmObj.add([tap2,rotate,pinch]);
hmObj.get('swipe').set({ enable: true});
hmObj.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hmObj.get('swipe').set({ direction: Hammer.DIRECTION_ALL });/<code>

Stackoverflow有類似的提問，坑也不大，但沒看到有正確/可解決問題的答案。

所以還是要記錄共享一下。

班門弄斧，行家莫笑。

閱讀更多 午間畫道 的文章

關鍵字: 識別 事件 Overflow