Can't cancel click event after handling tap event

[cheneytsai]

I'm having a issue where I'm unable to stop the default click event after I handle a Tap event.

Example:
Imagine buttons on top of each other. I have a tap handler on the top button that removes the button from the Dom, but then the click event fires 300ms later on the button underneath.

Tap - > Remove Button - > Click happens in the same coordinates.

Ideally, I would like to be able to cancel the click in my handler that also removes the button. Any thoughts? Thanks!

Let me know if you want me to reproduce.

[busticated]

I'm having this same issue - were you able to find a solution? If so, would you mind sharing?

[cheneytsai]

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.

https://developers.google.com/mobile/articles/fast_buttons touchs upon the idea of this "ghost click", so I ended up doing something simliar to 'capture' that click, though I opted to remove the coordinate requirement.

[jtangelder]

It might be an idea to create a fastClick plugin for Hammer, someday

[busticated]

Yeah, that'd be super-helpful (to me at least). I'll add it to my list here... maybe hack at it over the weekend.

I'm sort of stumped on how to handle this ghost click thing... i'm calling ev.preventDefault(), ev.gesture.preventDefault() (and all related bits like stopDetect() and stopPropagation() ) from my "tap" event handler but nothing short of reverting to plain touchstart event + preventDefault() is killing off the ghost click. In my scenario, the tap is closing / destroying dom elements... so the underlying elements are receiving the ghost click.

Any suggestions? I suppose I can just use touchstart and be done with it...

btw, thanks for a great lib!

[cheneytsai]

Hammer's events are parallel to the click event you're trying to cancel, so that won't be able to work. I had the same problem with "content shifting" after the tap event. I ended up creating my own app function preventClick() that I can attached to my event handlers to kill the click if it fires.

[jtangelder]

can you show the code of that method? sounds interesting

[drKnoxy]

@cheneytsai can you post a gist of what you did?

[cheneytsai]

Sorry been AWOL. My code involved invoking a global click handler thats eats the click with expiration delay. It was hacky and I wouldn't recommend using it.

I think there was a fix #314 that was since merged in that should address the issue though.

[electronicott]

hey, i have come across this issue recently, too.
i solved it with a global click event handler, which bends 'tap' gestures
to normal click events.
i added a custom fastclick hammer gesture, based upon the tap gesture,
and CANCELLING the ontouchend to stop double click events.

check out this fiddle: http://jsfiddle.net/ZFC6p/4/

[ganmor]

It is worth noticing that the following line will not work if you scroll the window between the tap event and the click event.
For example if your tap event is triggering a navigation that causes a scroll, the clickbuster will not work.

if (Hammer.detection.current.reachedTapMaxDistance || ev.deltaTime > inst.options.tap_max_touchtime)