Hammer.js：如何处理/设置同一元素上的单击和双击

Question

我正在使用 jquery.hammer.js，它的效果很好，我可以将函数绑定到双击事件上。这方面已经正常工作。

我想绑定两个不同的行为，一个是“轻触”，一个是“双击”。我使用下面的代码来绑定我的函数。但是当我这样做时，只会得到“轻触”事件，似乎无法触发“双击”事件。

$("#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 );
});

问题是如何同时绑定行为并区分两者以执行不同的操作。

谢谢。

- Benoit Letourneau

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

当一个轻敲手势需要识别失败时，它的识别器会等待一段时间来检查另一个手势是否已经失败。在这种情况下，您不应该假设其轻敲手势事件将立即触发。

SOURCE: http://hammerjs.github.io/require-failure/

- Josh Unger

---

太好了！我一定会尝试一下。谢谢。 - Benoit Letourneau

注意：如果你是从谷歌搜索跳转到这里的，请注意：将识别器添加到 Hammer Manager 实例中的顺序似乎很重要。需要失败的识别器应该在 .add() 方法的数组中首先出现。 - BAM5

Answer 2

虽然接受的答案可能没有问题，但我个人不得不对其进行编辑才能使其正常工作。由于这一切花费了比应该更长的时间来发现，所以我会提供我的可行解决方案。但是要向Josh Unger致敬。

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

- Reggie Pinkham

Answer 3

我猜测警告信息阻止了第一个代码块中的双击触发...虽然有点混乱，但你可以尝试类似如下的方式：

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

- Chris Dixon

Answer 4

我正在使用jQuery 2.1.0和Hammer 1.0.10，克里斯的答案几乎可以解决问题，但它在记录双击后触发日志敲击。我还将双击重置为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...
});

- Stephan Terning