javascript - 锤子.js : How to handle/set tap and doubletap on same elements

Question

我正在使用 jquery.hammer.js，它运行得很好，并且我能够将函数绑定(bind)到双击事件。这工作得很好。

我想要的是绑定(bind)两种不同的行为。一种用于“点击”，一种用于“双击”。我使用下面的代码来绑定(bind)我的函数。当我这样做时，我只得到“点击”，“双击”似乎没有被触发。

$("#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'... ) 绑定(bind)，那么我会按预期得到“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 );
});

问题是如何绑定(bind)这两种行为并区分两者以执行不同的操作

谢谢。

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/