jquery and hammer.js ghost click when panning

Question

I'm using jQuery 191 and Hammer JS 204. I have the following example scenario

<div> class="myDiv">
    <div class="content">
        <img>
    </div>
</div>

Example JS

$('.myDiv').hammer({}).bind("pan", function(h) {
    h.gesture.srcEvent.preventDefault();
});

$('.content img').on('click', function(){
    console.log('i was clicked');
});

When I click on the image to start panning myDiv, Right after panend, the myDiv img click event gets fired.

I've tried to stopPropagation and stopImmediatePropagation but still couldn't get it to stop firing the click after i finish panning.

Answer 1

var hammering = false;

$('.myDiv').hammer({}).bind("pan", function(h) {
    h.gesture.srcEvent.preventDefault();
}).bind("panstart", function(h) {
    hammering = true;
}).bind("panend", function(h) {
    setTimeout(function(){
        hammering = false;
    }, 300);
});

$('.content img').on('click', function(){
    if(hammering) return false;
    console.log('i was clicked');
});

Answer 2

Another way to avoid this ghost click is to create a pseudo class over the hammer target.

for example you can add class and the style something like

`.block:after {
  content: " ";
  background: transparent;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  z-index: 2;
  display: block;
  position: absolute;
}`

when panstart and remove it when panend.

hope this trick will help others.

Answer 3

I find out a easy way could prevent click event while hammer.js panning:

disable div pointer-events while pan start, then enable it while pan end.

    ...

    myPanGesture.on("panstart", function(ev) {
        $(".tab-pane.active").css({'pointer-events':'none'});
    });

    ...

    myPanGesture.on("panend", function(ev) {
        $(".tab-pane.active").css({'pointer-events':'auto'});
    });

    ...