Question

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

我想要的是绑定两种不同的行为。一个用于＆＃34;点击＆＃34;，一个用于＆＃34; doubletap＆＃34;。我使用下面的代码绑定我的函数。当我这样做的时候，我只会得到＆＃34;轻拍＆＃34;，＆＃34; doubletap＆＃34;似乎没有被触发。

$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
    alert( 'this was a double tap' );
}).on('tap', function (event) {
    alert( 'this was a single tap' );
});

如果我删除.on（＆＃39;点击＆＃39; ...）绑定，那么我会得到＆＃34; doubletap＆＃34;正如所料。

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

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

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

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

3 个答案: