Hammer.js：如何處理/設置相同元素上的點擊和雙擊

Question

我正在使用 jquery.hammer.js，它工作得很好，我能夠將 function 綁定到雙擊事件。 那工作正常。

我想要的是綁定兩種不同的行為。 一個用於“點擊”，一個用於“雙擊”。 我使用下面的代碼來綁定我的函數。 當我這樣做時，我只得到“點擊”，“雙擊”似乎沒有被觸發。

$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
    alert( 'this was a double tap' );
}).on('tap', function (event) {
    alert( 'this was a single tap' );
});

如果我刪除了 .on('tap'... ) 綁定，那么我會得到預期的“doubletap”。

$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
    alert( 'this was a double tap' );
});

如果我執行以下操作，這兩個事件都會一直被觸發。 我的意思是，我點擊並看到點擊和雙擊的警報。 我雙擊，同樣的事情，我看到兩個警報。

$("#W0AM").hammer();
$("#W0AM").on('tap doubletap', function (event) {
    alert( 'this was a ' + event.type );
});

問題是我如何綁定這兩種行為並區分兩者以執行不同的事情

謝謝你。

Answer 1

Hammer.js現在具有requireFailure方法來識別多次點擊。

因為可以同時識別多個手勢，並且可以基於其他手勢的失敗來識別手勢。 通過以下方式可以輕松識別同一元素上的多次點擊：

var hammer = new Hammer.Manager(el, {});

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

hammer.add([tripleTap, doubleTap, singleTap]);

tripleTap.recognizeWith([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);

doubleTap.requireFailure(tripleTap);
singleTap.requireFailure([tripleTap, doubleTap]);

當輕擊手勢要求識別失敗時，其識別器將等待一小段時間以檢查另一個手勢是否已失敗。 在這種情況下，您不應假定其輕擊手勢事件將立即被觸發。

消息來源： http ： //hammerjs.github.io/require-failure/

Answer 2

我的猜測是，該警報阻止在第一個代碼塊中觸發兩次敲擊……有點混亂，但是您可以嘗試執行以下操作：

var doubleTapped = false;
$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
    doubleTapped = true;

    console.log( 'this was a double tap' );
}).on('tap', function (event) {
    setTimeout(function() {
       if(!doubleTapped) {
          console.log( 'this was a single tap' );
       }

       doubleTapped = false;
    }, 500); // This may have to be higher dependant on the speed of the double tap...
});

Answer 3

我正在使用jQuery 2.1.0和Hammer 1.0.10，而Chris的答案幾乎可以正常工作，但在記錄兩次雙擊后會觸發日志點擊。 我還為doubleTap重置為false添加了超時，這對我來說似乎可行。

var doubleTapped = false;
Hammer(document.getElementById("W0AM")).on('doubletap', function (event) {
    doubleTapped = true;

    console.log( 'this was a double tap' );
}).on('tap', function (event) {
    setTimeout(function() {
       if(!doubleTapped) {
          console.log( 'this was a single tap' );
       }

       setTimeout(function() {
           doubleTapped = false;
       }, 500);

    }, 500); // This may have to be higher dependant on the speed of the double tap...
});

Answer 4

雖然接受的答案可能沒有錯，但我個人不得不對其進行一些編輯以使其正常工作。 因為這一切都需要更長的時間才能發現，所以我將提供我的工作解決方案。 但對喬什·昂格爾表示敬意。

var hammer = new Hammer(document);

var singleTap = new Hammer.Tap({ event: "tap" });
var doubleTap = new Hammer.Tap({ event: "doubletap", taps: 2 });

hammer.add([doubleTap, singleTap]);

singleTap.requireFailure(doubleTap);
doubleTap.recognizeWith(singleTap);

hammer.on("tap", function(e) {console.log("tap");});
hammer.on("doubletap", function(e) {console.log("doubletap");});