3

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.

8
  • 1
    codepen.io/anon/pen/iLFqK ??
    – Hackerman
    Commented Oct 2, 2013 at 13:26
  • @RobertRozas I think they want to keep the click functionality for regular clicks, but not have it fire after a hold event. Commented Oct 2, 2013 at 13:32
  • @Robert Rozas: Anthony Grist is right, I want this user action to only trigger "hold" (and not the click), while I still want to have click happen when it's not the hold event.
    – muszek
    Commented Oct 2, 2013 at 13:36
  • 3
    Not sure if there's a more elegant way, but you could do it like this: codepen.io/anon/pen/pjoAw Commented Oct 2, 2013 at 13:41
  • @AnthonyGrist now i get it...btw nice solution.
    – Hackerman
    Commented Oct 2, 2013 at 13:52

3 Answers 3

4

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)

0
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.

-1

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

Wrap inside parent <div>.

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.