如何使用hammer.js jQuery插件设置不同的速度来识别滑动手势？

Question

我在使用 hammer.js 的 jQuery插件 时，遇到了添加选项的问题。这是我如何初始化 hammer：

            /* Create Hammer object for swipable game cards */
            $('.game-card-mobile')
            .hammer()
            .bind('swiperight swipeleft press', function(ev) {
              console.log(ev.type);
            });

我发现要执行滑动操作，需要进行相对较快的滑动，我想减少所需的滑动速度以触发事件。阅读文档后：http://hammerjs.github.io/recognizer-swipe/，似乎有一个默认值为0.65的速度选项，因此我假设可以将其更改为0.5，以便在较慢的滑动上触发事件？

编辑：如果这有帮助的话，以下是一些用JavaScript编写的滑动测试示例：https://github.com/hammerjs/hammer.js/blob/master/tests/unit/gestures/test_swipe.js。这显示了如何设置{threshold: 1}，我正在尝试在使用jQuery插件时实现这一点。

- Ilja

Answer 1

您所发的链接是来自一个叫 Hammer.js 的库。要使其正常工作，您必须在项目中导入此库。

正如他们所说的那样，需要达到一定的最小速度才能识别，单位为每毫秒像素（px per ms）。这意味着每毫秒需要达到0.65像素，那么将其设为0.50可以使触摸事件发生时速度更低。

0.50 -> 将在较低速度下触发

0.80 -> 难以触发

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('swipe', function(ev) {
    alert(ev);
});

hammertime.get('swipe').set({ velocity: 0.80});

这是正确的方式吗？

希望它能对您有所帮助。

---

编辑：如jquery api页面所述：Hammer实例存储在$element.data("hammer")中。

那么也许

$("#yourdivtoswipe_id").data('hammer').get('swipe').set({ velocity: 0.80});

问候

- Alejandro Teixeira Muñoz

---

是的，它确实来自那个库，我更新了标题。你发布的也是示例中显示的正确方式，但是我正在尝试通过他们的jQuery插件添加选项，该插件使用.hammer()而不是new Hammer().. - Ilja

我猜hammertime.get('swipe').set({ velocity: 0.80});会修改库管理的所有滑动事件，是这样吗？ - Alejandro Teixeira Muñoz

我尝试了，但是出现了“Uncaught TypeError：无法读取未定义的属性'set'” - Ilja

那就意味着 hammertime.get('swipe') 是空的。为什么不在你的应用程序中通过“new Hammer”进行文本搜索，以查看哪个是为此创建的对象？也许名称不是 hammertime。如果您没有创建 Hammer，则需要创建一个新的 Hammer。--编辑-- 我刚刚了解到你说的 jQuery 插件。他们说：Hammer 实例存储在 $element.data("hammer") 中。那么也许 $("#yourdivtoswipe_id").data("hammer).get('swipe').set({ velocity: 0.80});。 - Alejandro Teixeira Muñoz

Answer 2

这是做法： $("#yourelemenet").hammer({选项}).bind("tap", function(ev) {}); 注意选项对象。以下是我代码中的一个快速示例：

$("#yourelemenet").hammer({threshold: 10, posThreshold:50, time:1000}).bind("tap", function(ev) {});

编辑：在您看到阈值、posThreshold、时间以上的位置添加速度。

- Josh Pope