HammerJS triggers click after dragend

Question

I have a perfectly working hammerjs drag listener that captures drags just like I'd expect. But when you let go, right after the dragend is triggered, it then triggers a click event as well. So if you were clicking to drag (move) the target, and the cursor happened to be over a link, when you let go (drop), it triggers a click on the link, which I don't want.

Here's my code:

$('.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);

If I console.log the event on all three handlers and console.log click events on all links, I get something like this in my console:

dragstart
dragmiddle
dragmiddle
dragmiddle
dragmiddle
dragend
click

I want to avoid the click at the end. I tried adding event.stopPropagation() to all of the handle methods, but to no avail.

HammerJS triggers click after dragend

2 Answers