javascript - 使用 hammer.js 的最小拖动/滑动距离

Question

我正在做一个 HTML5 应用程序，我想配置一个滑动/拖动功能来打开/关闭 offcanvas 菜单。

该功能效果很好，但我想要更精确的水平滑动或拖动，以防止触发垂直滚动和激活菜单。

默认情况下，滑动似乎效果不佳，因为必须非常快(甚至改变速度)，拖动效果正常，但只需按下并稍微移动一下即可激活该事件。

我尝试更改变量 drag_lock_min_distance，但不幸的是根本不起作用，即使是后面的巨大值，我也感觉不到差异。

我尝试实时检查内部变量 X 速度和距离，但它们显示的值是第一个事件的引用值，而不是 dragstart 和 dragend。

我将原始的 hammer.js 与 twitter bootstrap 一起使用，来自 CDN 的 hammerjs 版本 1.0.6(最后一个稳定版本)。我正在 Android 标准浏览器 4.1.2 和 4.4(两款不同的手机)以及适用于 Android 的 Google Chrome 上进行测试。 这里有代码:

var element = document.getElementById('contenido');
Hammer(element,{drag: true,
      prevent_default: false,
      drag_block_horizontal: true,
      drag_lock_min_distance: 250,
      hold: true,
      release: true}).on("dragleft", function(event) {
// function
});
Hammer(element,{drag: true,
      prevent_default: false,
      drag_block_horizontal: true,
      drag_lock_min_distance: 250,
      hold: true,
      release: true}).on("dragright", function(event) {
//function
});

你知道有什么方法可以控制距离，让事件的触发变得不那么明智吗？

Answer 1

对于将来遇到此问题的人，来自 Hammer > 2.0，

您可以指定一个threshold选项来设置识别前所需的最小距离，如下所示:

var hammertime = new Hammer(myElement, myOptions);
hammertime.get('swipe').set({ threshold: 100 });
hammertime.on('swipe', function(ev) {
   console.log(ev);
});