Hammer.js：如何处理/设置相同元素的点击和双击 [英] Hammer.js : How to handle / set tap and doubletap on same elements

问题描述

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

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.

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

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.

$("#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'...）绑定，那么我得到了双击如预期的那样。

If I remove the .on('tap'... ) binding, then I get the "doubletap" as expected.

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

谢谢。

推荐答案

Hammer.js现在有一个requireFailure方法识别多个水龙头。

Hammer.js now has a requireFailure method to recognize multiple taps.

因为可以同时识别多个手势，并且可以根据其他手势的失败识别手势。通过这种方式可以轻松识别同一元素上的多个点击：

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.

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

这篇关于Hammer.js：如何处理/设置相同元素的点击和双击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！