javascript - 如何将 'tap' 和 'doubletap' 绑定(bind)到 Hammer.js 中的同一元素？

Question

我目前正在(尝试)使用 cordova 在 eclipse 中为我正在开发的手机游戏创建一些基本元素。我在这里要做的主要事情是在同一个元素上设置两个点击事件。下面的代码显示了我如何尝试解决这个问题，但是当我尝试双击时，它不会被检测到 - 我得到的只是两次单击。我尝试过不同的方法，但没有一个有帮助。

当双击失败时，我还会在控制台中收到此警报:“尝试完成输入事件，但输入事件接收器已被处理”。

var doubletapped = false,
    tapped = false;
$(function() {
    var element = document.getElementById('blue');
    var hammertime = Hammer(element).on("tap doubletap", function(event) {
        if (event.type == 'doubletap') {
            tapped = false;
            doubletapped = true;
            alert('doubleTap!');
            console.log('doubleTap!');
        }
        if (event.type == 'tap') {
            doubletapped = false;
            tapped = true;
            alert('single tap!');
            console.log('singleTap!');
        }
    });
});

如 Hammer.js changelog 中所述，我设置了tap_always = false，但没有什么区别。你有什么建议吗？有没有其他库可以做同样的事情而不会出现这个问题？

我想要实现的是检测元素上的不同点击或/和手势，然后执行不同的操作。例如，如果单击元素 #1，则播放音频文件 #1，如果双击同一元素，则播放音频文件 #2。

帮助将不胜感激!

干杯

Answer 1

试试这个 -

var hammer = new Hammer.Manager(element, {});

var singleTap = new Hammer.Tap({event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });

hammer.add([doubleTap, singleTap]);

doubleTap.recognizeWith(singleTap);

singleTap.requireFailure([doubleTap]);

hammer.on('singletap', function() { console.log('single tap!') });
hammer.on('doubletap', function() { console.log('double tap!') });