Hammer.js:如何处理/设置相同元素的点击和双击

Question

我正在使用jquery.hammer.js,它工作得很好,我能够将函数绑定到doubletap事件.这工作正常.

我想要的是绑定两种不同的行为.一个用于"tap",一个用于"doubletap".我使用下面的代码绑定我的函数.当我这样做时,我只得到"敲击","双击"似乎没有被触发.

$("#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/