CODEWITHSUNDEEP
javascriptjquerytouchhammer.js
Matt Stauffer
Matt Stauffer

Reputation: 2742

HammerJS triggers click after dragend

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.

Upvotes: 4

Views: 1411

Answers (2)

Zahnstochermann
Zahnstochermann

Reputation: 101

I had a pretty similar problem, and found some kind of workaround - I know it's dirty but the links are not being clicked by a drag. I want to drag a wrapper-div, which is my wrapper element seen in the js below. It has several links in it, wich are being clicked when the dragging stops above them, and i want to prevent that from happening.

First, i define a div that is on top of everything but set hidden in my 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>

Then, in the hammer functions, the div is set to visible at a dragstart (in this case, a dragdown) - you just can't see it because it has no background-color or any content. 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';
});

I know this is far from perfect and your post is from several months ago, but it worked for me. Hope i could help :)

Upvotes: -1

Mike
Mike

Reputation: 171

Try using Hammer.js tap events instead of the click events on the links.

Upvotes: 3

Related Questions