Hammer.js

Question

我正在使用 Hummer.js 来处理单击和双击，这两种手势的识别都有几百毫秒的延迟。如此处所示 (fiddle)

var hammertime = new Hammer.Manager(containerElement);
hammertime.add(new Hammer.Tap({event: 'doubletap', taps: 2}));
hammertime.add(new Hammer.Tap({event: 'singletap'}));
hammertime.get('singletap').requireFailure('doubletap');
hammertime.on("doubletap", onDoubleTap);
hammertime.on("singletap", onSingleTap);

单击延迟是不可避免的，因为它必须等待以确保这实际上不是双击。但是没有理由双击延迟。我可以删除 requireFailure 设置并处理我自己在此处演示的这种逻辑 (fiddle).

var hammertime = new Hammer.Manager(containerElement);
hammertime.add(new Hammer.Tap({event: 'doubletap', taps: 2}));
hammertime.add(new Hammer.Tap({event: 'singletap'}));
//hammertime.get('singletap').requireFailure('doubletap');
hammertime.on("doubletap", onDoubleTap);
hammertime.on("singletap", setupSingleTapTimeout);

function setupSingleTapTimeout() {
    cancelSingleTapTimeout();
    timeoutId = window.setTimeout(onSingleTap, 300);
}

function cancelSingleTapTimeout() {
  if(timeoutId !== null) {
    window.clearTimeout(timeoutId);
    timeoutId = null;
  }
}

function onDoubleTap() {
    cancelSingleTapTimeout();
    ...
}

但我更愿意保持关注点分离并将此类工作留给 Hammer，这似乎也是它应该知道如何做的事情..

那些知道如何用锤子实现这个的人

Answer 1

深入研究库代码后，我意识到在两个手势之间设置 requireFailure 隐式 requiresFailure 也在相反的方向。在我的例子中，单击会等待双击失败，但双击也会等待单击失败，这是没有意义的，并导致双击遭受等待的惩罚。

然而，有一种方法可以使用

在单个方向上删除 requireFailure 条件

hammertime.get('doubletap').dropRequireFailure('singletap')

完整示例 (fiddle)

Hammer.js - 支持单击和双击无延迟

Hammer.js - support single and double tap without delay

javascript