HammerJS 在拖动结束后触发点击答案

【问题标题】：HammerJS triggers click after dragendHammerJS 在拖动结束后触发点击
【发布时间】：2013-12-19 14:49:27
【问题描述】：

我有一个完美工作的hammerjs 拖动监听器，它可以像我期望的那样捕获拖动。但是当你放手时，就在 dragend 为triggered 之后，它也会触发click 事件。因此，如果您单击以拖动（移动）目标，并且光标恰好位于链接上，当您松开（放下）时，它会触发对链接的单击，这是我不想要的。

这是我的代码：

$('.draggable').hammer({
    drag_min_distance: 0,
    drag_max_touches: 2,
    drag_lock_to_axis: true,
    drag_lock_min_distance: 30
}).on('drag', handleMiddleEvent)
  .on('dragstart', handleStartEvent)
  .on('dragend', handleEndEvent);

如果我在所有三个处理程序上控制台.log event并且在所有链接上单击控制台.log events，我会在我的控制台中得到类似的内容：

dragstart
dragmiddle
dragmiddle
dragmiddle
dragmiddle
dragend
click

我想避免最后的点击。我尝试在所有的句柄方法中添加event.stopPropagation()，但无济于事。

【问题讨论】：

我能够通过添加“is_dragging”全局变量来破解解决方案，在 handleStartEvent 中将其设置为 true，然后在将其设置为 false 的 handleEndEvent 中设置 100 毫秒 setTimeout，然后检查全局变量在我的点击处理程序上。但这太丑了..我真的希望有更好的东西。
您找到更好的解决方案了吗？

标签： javascript jquery touch hammer.js

【解决方案1】：

尝试在链接上使用 Hammer.js tap 事件而不是 click 事件。

【讨论】：

阻止点击和绑定点击有点麻烦，但它可以工作。

【解决方案2】：

我有一个非常相似的问题，并找到了某种解决方法 - 我知道它很脏，但链接没有被拖动点击。我想拖一个 wrapper-div，这是我在下面的 js 中看到的 wrapper 元素。它有几个链接，当拖动停止在它们上方时会被点击，我想防止这种情况发生。

首先，我定义了一个 div，它位于所有内容之上，但设置为隐藏在我的 html 中：

<div id="wrapper">
     <div id="linklist">
          <-- Links etc in here-->
          <div id="preventClick" style="visibility: hidden; position: absolute; width: 5000px; height: 6000px; "></div>
     </div>
</div>

然后，在锤子函数中，div 设置为在拖动开始时可见（在本例中为向下拖动） - 您只是看不到它，因为它没有背景颜色或任何内容。 JS：

var wrapper = document.getElementById("wrapper");

Hammer(wrapper).on("dragdown", function() {
     handleDragDown();  //call function that handles movement
     var preventClick = document.getElementById("preventClick");
     preventClick.style.visibility = 'visible';
});

Hammer(wrapper).on("dragend", function() {
     var preventClick = document.getElementById("preventClick");
     preventClick.style.visibility = 'hidden';
});

我知道这远非完美，您的帖子是几个月前的，但它对我有用。希望我能帮忙:)

【讨论】：