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

【问题标题】：Hammer.js : How to handle / set tap and doubletap on same elementsHammer.js：如何处理/设置相同元素的点击和双击
【发布时间】：2014-03-20 13:52:39
【问题描述】：

我正在使用 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 );
});

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

谢谢。

【问题讨论】：

标签： javascript jquery hammer.js

【解决方案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/

【讨论】：

听起来不错！我一定会试一试的。谢谢
请注意从 google 偶然发现的其他人：识别器添加到锤子管理器实例的顺序显然很重要。需要失败的识别器应该在.add()方法中的数组中排在第一位。

【解决方案2】：

我的猜测是警报会阻止在第一个代码块中触发双击...这有点乱，但您可以尝试以下操作：

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

【讨论】：

【解决方案3】：

我正在使用 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...
});

【讨论】：