javascript Hammer.js：如何在相同元素上处理/设置点击和双击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22535088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hammer.js : How to handle / set tap and doubletap on same elements
提问by Benoit Letourneau
I'm using jquery.hammer.js, it works quite well and I am able to bind function to a doubletap event. That is working fine.
我正在使用 jquery.hammer.js，它工作得很好，我能够将函数绑定到双击事件。那工作正常。
What I want is to bind two different behaviors. One for the "tap", one for the "doubletap". I use the code below to bind my functions. When I do that, I only get the "tap", the "doubletap" doesn't seem to be triggered.
我想要的是绑定两种不同的行为。一种用于“敲击”，一种用于“双击”。我使用下面的代码来绑定我的函数。当我这样做时，我只得到“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' );
});
If I remove the .on('tap'... ) binding, then I get the "doubletap" as expected.
如果我删除 .on('tap'... ) 绑定，那么我会按预期获得“双击”。
$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
alert( 'this was a double tap' );
});
If I do the following, both events get triggered all the time. I mean, I tap and I see the alert for the tap and the double tap. I doubletap, same thing, I see both alerts.
如果我执行以下操作，这两个事件都会一直被触发。我的意思是，我点击并看到点击和双击的警报。我双击，同样的事情，我看到两个警报。
$("#W0AM").hammer();
$("#W0AM").on('tap doubletap', function (event) {
alert( 'this was a ' + event.type );
});
The question is how can I bind both behavior and distinguish between the two in order to perform different things
问题是我如何绑定两种行为并区分两者以执行不同的事情
Thank you.
谢谢你。
回答by Josh Unger
Hammer.js now has a requireFailure method to recognize multiple taps.
Hammer.js 现在有一个 requireFailure 方法来识别多次点击。
Because multiple gestures can be recognized simultaneously and a gesture can be recognized based on the failure of other gestures. Multiple taps on the same element can be easily recognized on this way:
因为可以同时识别多个手势，并且可以根据其他手势的失败来识别一个手势。通过这种方式可以轻松识别同一元素上的多次点击：
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]);
When a tap gesture requires a failure to be recognized, its recognizer will wait a short period to check that the other gesture has been failed. In this case, you should not assume that its tap gesture event will be fired immediately.
当一个敲击手势需要识别失败时，它的识别器将等待一小段时间来检查另一个手势是否失败。在这种情况下，您不应该假设它的点击手势事件会立即触发。
回答by Chris Dixon
My guess is that the alert is preventing doubletap from being triggered in the first code block... it's kinda messy but you could try something like:
我的猜测是警报阻止了在第一个代码块中触发 doubletap ......这有点混乱，但你可以尝试这样的事情：
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...
});
回答by Stephan Terning
I'm using jQuery 2.1.0 and Hammer 1.0.10 and Chris's answer almost work but it fires logs tap after logging double tap. I've added a timeout also to the reset of doubleTap back to false and it seems to work out for me.
我正在使用 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...
});
