swipe conflict with pinch

I am using the hammerjs swipe event and get problems in combination with native zoom (pinch).

In a web application I allow users to scroll:

<meta name="viewport" content="width=device-width, initial-scale=1" />

And navigate with AJAX through my pages on swipe:

var $body = $("body");
var bodyHammer = new Hammer($body[0]);
bodyHammer.on("swipe", function(event){
    // my logic ...
});

However, this causes a usability issue. When users try to zoom-in on e.g. iPads, they don’t want to trigger the swipe. Instead they just want to zoom the page. But unfortunately this often causes a swipe to get triggered, especially if you zoom-in horizontally.

Firstly I thought using the pointers option with the value 1 like described in the doc would solve the problem, but it doesn’t. I didn’t understand why swipe was getting triggered even when swiping with two fingers (if set the pointers value to 1). Then I thought setting a flag on pinch could solve my issue. So I tried setting:

var $body = $("body");
var bodyHammer = new Hammer($body[0]);
var isPinching = false;
bodyHammer.on("pinchstart", function(event){
    isPinching = true;
});
bodyHammer.on("pinchend", function(event){
    isPinching = false;
});
bodyHammer.on("swipe", function(event){
    if(isPinching){
        return;
    }
    // my logic ...
});

After finding out that I need to enable the pinch event (https://github.com/hammerjs/hammer.js/issues/870) that worked for me. But this caused the side-effect that I wasn’t able to scroll down the page (https://github.com/hammerjs/hammer.js/issues/691). But thanks to the idea of @lostPixels I was able to solve the problem with yet another idea:

var $body = $("body");
var bodyHammer = new Hammer($body[0]);
var touchFingers = 1;
$body.on("touchstart", function(event){
    touchFingers = event.originalEvent.touches.length;
});
bodyHammer.on("swipe", function(event){
    if(touchFingers > 1){
        return;
    }
    // my logic ...
});

Now you could ask yourself:

Ok if you have solved the issue why are you fucking open another issue and wasting my time?

Yup :bowtie:

Because:

1. I want to bring up the question why a swipe-event is getting fired when using the option pointers with value 1 and swiping with two fingers?
2. If 1. is not a bug, I want to share my use case and fix for others experiencing the same issue and maybe initiate a fix to support native zoom (like on the iPad).

Cheers.

[g3ntleman]

I solved this issue by blocking pan / swipe for a certain time (300ms) after / during pinch:

During any pinch event, I do

  lastPinchTime = Date.now();

During pan / swipe, I do:

 if (Date.now()-lastPinchTime < 300) {
       console.log("Ignored pan after pinch!");
       break; // or return
 }

Works perfectly for me. But of cause, this should be part of the library.

[runspired]

Reopening this as it’s representative of an issue we may still have and need to fix in 2.1