hammer.js - how to register a "hold" event without propagating a "click" event?

Question

I want to register a hold event, but "skip" the logic behind the "click" event on this element and its parents... how do I do that?

Test case (please feel free to fork & edit): http://codepen.io/muszek/pen/detAK

Use case: User holds on a #foo box to open up a #bar dialog with options for that element. Clicking anywhere (but on the #bar) closes the #bar. Currently, holding #foo opens up #bar, but immediately closes it when the button is released.

Answer 1

Hammer.js doesn't really handle the native events. So here you should listen for the tap event rather than the click.

I don't think a tap event is triggered if the gesture is a hold, but if it does, just call e.gesture.stopDetect(); to prevent multiple gesture type of being triggered. (for example, this is often use to prevent release event from being triggered after a swipe)

Answer 2

You can't prevent a native click being fired. What you should do is listen for 'tap' instead of 'click'. Hammer.js defines hold as a tap that lasts more than a certain amount of time.

If you are not listening for 'click' at all, but want to prevent an href or a button from being fired, forget it. Change the button for a div and the href for a normal text, style them so they look as before and now listen for 'tap' on them.

Answer 3

http://codepen.io/anon/pen/dPVXrP

Wrap inside parent <div>.