Question

我有一个完美工作的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);

如果我在所有三个处理程序和 console.log上的event上点击events，请在所有链接上单击dragstart dragmiddle dragmiddle dragmiddle dragmiddle dragend click，我在我的控制台中得到类似内容：

event.stopPropagation()

我想避免最后的点击。我尝试将{{1}}添加到所有句柄方法中，但无济于事。

Answer 1

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

Answer 2

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

首先，我定义了一个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>

然后，在hammer函数中，div被设置为在dragstart上可见（在这种情况下，是一个下拉） - 你只是看不到它，因为它没有背景颜色或任何内容。 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';
});

我知道这远非完美，你的帖子是几个月前的，但它对我有用。希望我能提供帮助：）

HammerJS在dragend之后触发click

2 个答案: