hammerJs - 区分滑动和拖动

时间:2014-01-07 22:33:55

标签: hammer.js

如何在同一元素上区分滑动和拖动?我试过了:

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/

但是当我滑动时,我只是得到拖动警报而不是滑动。 我需要的只是滑动事件以快速滑动,只需拖动事件以进行更长时间的拖动

任何帮助?

2 个答案:

答案 0 :(得分:2)

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

我尝试在Chrome中使用默认swipe_velocity,并注意到如果你移动就像是滑动一样,即touch =>快速拖动=>发布时,它会将事件另外注册为swipe所有标准touchdragrelease。因此,如果需要,我建议首先捕获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
    };
  },

答案 1 :(得分:1)

您尝试的几个问题。

首先,不要使用警报,尝试使用console.log并在您正在使用的任何浏览器上打开开发工具(F12)。警报框本身可能很难测试当它弹出并阻碍事件发生时实际发生的事情。

现在,坏消息。没有阻力就无法滑动。滑动是动作的快速“轻弹”,如果您删除拖动警报,则您的小提琴可以正常工作。由于滑动需要运动,因此根据定义它会触发拖动。

好消息是,有办法解决它。

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

一个简单的if语句,如果它移动得太快,你可以避免对它进行操作。