Question

我正在尝试使用Hammer.js接收三种类型的点击事件

用一根手指单击一次
用一根手指双击
用两根手指双击

如何在Hammer.js中正确设置

这是我目前拥有的：

  if (mc == null) {
    mc = new Hammer.Manager(el);
  }
  mc.set({ touchAction: "none" });
  //mc.get("swipe").set({direction: Hammer.DIRECTION_ALL, pointers: 2});'
  //mc.get('tap').set({enable: false});
  var singletap = new Hammer.Tap({
    event: "singletap",
    taps: 1,
    pointers: 1
  });

  var doubletap = new Hammer.Tap({
    event: "doubletap",
    taps: 2,
    pointers: 1
  });
  var twodoubletap = new Hammer.Tap({
    event: "twodoubletap",
    taps: 2,
    pointers: 2
  });

  mc.add([twodoubletap, doubletap,singletap]);//, twotap, threetap]);

  twodoubletap.recognizeWith([doubletap,singletap])
  doubletap.recognizeWith([singletap,twodoubletap])

  //doubletap.requireFailure(twodoubletap);

  singletap.requireFailure([doubletap,twodoubletap]);

  mc.on("twodoubletap doubletap singletap", binding.value);

我可以连续轻按一次，有时用一个手指双击。

两指双击不触发，或随其后的另一个触按一起触发。

理想情况下，我希望每种类型的水龙头都能持续开火。

Answer 1

我通过做三件事就能使它起作用。 1.我在其他手指的两指双击中添加了dropRequireFailure 2.我将事件中的阈值增大了。 3.我在事件处理程序中添加了一个基于时间的过滤器，以拒绝彼此之间距离太近的抽头。我知道这不是理想的方法，但目前可以使用。

          if (mc == null) {
            mc = new Hammer.Manager(el);
          }
          mc.set({ touchAction: "none" });
          //mc.get("swipe").set({direction: Hammer.DIRECTION_ALL, pointers: 2});'
          //mc.get('tap').set({enable: false});
          var singletap = new Hammer.Tap({
            event: "singletap",
            taps: 1,
            pointers: 1,
            interval: 500,
            threshold: 200,
            posThreshold: 200
          });

          var doubletap = new Hammer.Tap({
            event: "doubletap",
            taps: 2,
            pointers: 1,
            interval: 300,
            threshold: 200,
            posThreshold: 200
          });
          var twodoubletap = new Hammer.Tap({
            event: "twodoubletap",
            taps: 2,
            pointers: 2,
            interval: 400,
            threshold: 500,
            posThreshold: 200
          });

          mc.add([twodoubletap, doubletap,singletap]);//, twotap, threetap]);

          twodoubletap.recognizeWith([doubletap,singletap])
          doubletap.recognizeWith([twodoubletap])

          doubletap.requireFailure(twodoubletap);
          singletap.requireFailure([doubletap,twodoubletap]);
          twodoubletap.dropRequireFailure(doubletap);
          twodoubletap.dropRequireFailure(singletap);

          mc.on("twodoubletap doubletap singletap", handler);

然后在事件处理程序的顶部：

      let now = Date.now();
      if((now - lastTap)<500){
        return;
      }
      lastTap = now;

如何在Hammer.js中接收两个/一个手指和单个/双击的组合

1 个答案: