HammerJS clicking on Pan

Question

ready = ->
  onPan = (ev) ->
    console.log(ev)
    # ev.target.dataset.object

  createHammer = (v) ->
    mc = new Hammer.Manager(v, {})
    mc.add new Hammer.Pan(
      direction: Hammer.DIRECTION_HORIZONTAL
      threshold: 20
    )
    mc.on 'panleft', onPan
    mc.on 'panright', onPan

  selector = '.foo a'
  createHammer(v) for v in document.querySelectorAll(selector)

$(document).ready(ready)
$(document).on('page:load', ready)

I don't know what I'm doing wrong, here... the objects all get a handler, and when I drag 's (mind you, with my mouse on my computer) if I stop on the element, it clicks. The last hammer event's srcEvent.type is mousemove, so it's not hammer firing the event. I tried calling ev.preventDefault(), but didn't seem to have any effect.

I still want to be able to click the ... just not after a drag. What am I missing?

I tried preventDefault: true as an option on the manager...

I tried ev.preventDefault() on the action...

Answer 1

I had the same problem, fixed it by temporarily (200ms) disabling click-handling on the target element. This was done in the panend event by setting a flag and starting a timer to remove that flag

Answer 2

As stated in this comment: https://github.com/hammerjs/hammer.js/issues/240#issuecomment-16583814

"It's not a Hammer issue really, but rather just the way client events propagate. Hammer isn't replacing all default events but rather augmenting it, so default stuff like Click still fires."

And you can filter such click with a regular flag. E.g. in Angular 7:

@HostListener('click', ['$event'])
onClickBtn(){
  if (!this.filterGhostClick) {
    this.regularClickHandler();
  }
  this.filterGhostClick = false;
}

@HostListener('pan', ['$event'])
onPanStart(e){
  this.panHandler(e);
}

private filterGhostClick = false;

panHandler(e: Event) {
  ...
  if (e.isFinal) {
    this.filterGhostClick = true;
  }
}
...