Hammer.js: Swipe not detected when pan is added alongside swipe

[shortdiv]

When an element has both pan and swipe events, only pan is detected. One way that swipe will be detected is by adding .recognizeWith to it, so it is triggered alongside a pan event. But with that both pan and swipe are detected consecutively which is unideal.

var mc = new Hammer(element)
mc.add(new Hammer.Pan())
mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'))
mc.on('swipeleft, swiperight panleft panright', function(ev) {
  if(ev.type==='swiperight' || ev.type==='swipeleft') {
    console.log('swiper no swiping!')
  } else if(ev.type === 'panright' || ev.type === 'panright') {
    console.log('pan pan panning')
  }
})

Pen for reference:
http://codepen.io/shortdiv/pen/qmbyxK?editors=0111

Tested on:
Firefox Nightly
Chrome Version 57.0.2987.133 (64-bit)
Mac Sierra 10.12.3

[sethyuan]

Same here, is anyone looking after this issue?

[tbenbrahim]

The work around is to only handle pan, and look at the velocity. A pan will have a low positive or negative velocity (most often under 1), and a swipe will have a high positive of negative velocity (typically >10 or <-10)

[fgilio]

Internally hammer uses a low velocity but large distance:

hammer.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 }));
hammer.on('panstart pan panend', e => {
    if (e.type === 'panend' && e.velocityX < -0.3 && e.distance > 10) {
        // Swipe left
    }
    if (e.type === 'panend' && e.velocityX > 0.3 && e.distance > 10) {
        // Swipe right
    }
});

👆🏼this works really well in my tests