HammerJS拖动结束后触发点击事件。

Question

我有一个完美工作的hammerjs拖动监听器，可以像预期的那样捕获拖动。但是，当您放开后，dragend被触发后，它会触发一个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);

如果我在所有三个处理程序上使用console.log来输出event，并在所有链接上console.log click events，那么我在控制台上会得到类似于这样的结果:

dragstart
dragmiddle
dragmiddle
dragmiddle
dragmiddle
dragend
click

我希望避免在最后进行点击。我尝试将event.stopPropagation()添加到所有处理方法中，但没有效果。

- Matt Stauffer

---

我通过添加一个“is_dragging”全局变量，在handleStartEvent中将其设置为true，并在handleEndEvent中放置了一个100毫秒的setTimeout来将其设置为false，然后在我的click处理程序中检查全局变量，从而成功地解决了问题。但这样做太丑陋了...我真的希望有更好的解决方案。 - Matt Stauffer

你找到更好的解决方案了吗？ - Renan Ferreira

Answer 1

尝试使用Hammer.js的tap事件替代链接上的click事件。

- Mike

---

防止点击并绑定轻拍有点混乱，但它可以工作。 - Kru

Answer 2

我之前遇到了一个相似的问题，找到了一种解决方法 - 我知道这很“肮脏”，但链接不会在拖动时被点击。我想拖动一个包装器div，该div是下面js中看到的我的包装元素。它里面有几个链接，在拖动结束时被点击，我想防止这种情况发生。

首先，在我的html中定义一个div，它在所有东西的顶部但设置为隐藏：

<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 在 dragstart（在这种情况下是 dragdown）时设置为可见 - 您只是看不到它，因为它没有背景颜色或任何内容。 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';
});

我知道这远非完美，而且您的帖子已经过去了好几个月，但它对我很有用。希望我能帮到您 :)

- Zahnstochermann