HammerJs - 区分滑动和拖动

Question

如何在同一元素上区分滑动和拖动？ 我尝试了：

Hammer(blueDiv).on('swipe', function(e) {
   e.gesture.stopDetect();
   e.gesture.preventDefault();
   alert('swipe');
});

Hammer(blueDiv).on('drag', function(e) {
   alert('drag');
});

(http://jsfiddle.net/crEEN/)

但是当我滑动时，我只会收到拖拽而不是滑动的提示。 我需要的是快速滑动事件以及较长时间的拖拽事件。

请问有什么帮助吗？

- kofifus

---

您如何区分拖动和滑动的区别？ - Justin Niessner

你是在暗示这是预期的行为吗？Hammer支持拖动和滑动，因此必须有区别...对我来说，滑动很快且覆盖的距离很短，而拖动则较慢且覆盖的距离很长。 - kofifus

我并不是在说它不被支持。我想知道当两者都应用于同一元素时，你如何区分它们的差异。 - Justin Niessner

抱歉，我不明白，如果它是相同的元素，为什么会有区别？如果拖动和滑动是相同的，那么根本没有滑动的必要了吧？如果它们是不同的，那么它们应该在单个元素上也是可区分的。 - kofifus

我的观点是两者都涉及使用手指触摸元素，然后进行移动。一旦触摸，您将使用什么标准来区分滑动和拖动？我知道它们是两个不同的东西，并且框架支持两者，但是在单个元素上，我很好奇它如何区分它们。 - Justin Niessner

Answer 1

我面临同样的挑战，需要以某种方式区分滑动和拖动事件。我所看到的主要标准是所谓的移动速度，它在选项中设置为swipe_velocity，在Hammer选项中。

我尝试在Chrome中使用默认的swipe_velocity，并注意到如果您进行类似于滑动的移动，即触摸=>快速拖动=>释放，那么它会将事件注册为swipe，除了所有标准的touch、drag、release事件之外。因此，我建议首先捕获swipe事件，然后再根据需要处理其他事件。

以下是负责计算速度的Hammer函数，这使事情更清晰：

  /**
   * calculate the velocity between two points
   * @param   {Number}    delta_time
   * @param   {Number}    delta_x
   * @param   {Number}    delta_y
   * @returns {Object}    velocity
   */
  getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
    return {
      x: Math.abs(delta_x / delta_time) || 0,
      y: Math.abs(delta_y / delta_time) || 0
    };
  },

- Sergei Basharov

Answer 2

您的尝试存在几个问题。

首先，不要使用警报，尝试使用console.log并在您正在使用的任何浏览器上打开开发工具（F12）。 警报框本身可能会使测试时弹出的内容变得困难，并妨碍事件的进行。

现在，坏消息。 没有拖动就没有滑动。 滑动是一种快速的“轻扫”运动，如果删除该拖动警报，则您的fiddle可以正常工作。由于滑动需要运动，因此按定义它将触发拖动。

好消息是，有解决方法。

虽然您无法避免触发拖动事件而不会在实际需要时搞砸它，但您可以避免对其进行操作。 我建议在拖动处理程序中查看event.gesture.velocity。

一个简单的if语句，如果移动得太快，您就可以避免对拖动进行操作。

- David Miller