Hammer.js clicked on DOM elements after clicking after clicking

Question

I use Hammer.js to detect touches of mobile devices, tap, swipe the screen, etc.

I have an interaction in which I click, I hide the related content (and, possibly, my parents) and show another place in its place (change the screen functionality).

The problem is that newly visible content may have events associated with them, or it can interact with them directly (for example, labels for switching flags, focused text inputs). If the components are hidden / displayed as soon as a short press occurs, the 400 ms click event still works and then fires on the elements below.

Check out this jsfiddle on your mobile device:

http://jsfiddle.net/annam/xGJZL/

http://jsfiddle.net/annam/xGJZL/embedded/result/

<div class="checkbox"> <input type="checkbox" id="check" /> <label for="check"></label> </div> <div class="box"></div> <style> .checkbox { width: 500px; height: 500px; position: absolute; top: 0; ; left: 0; } .checkbox input { display: none; } .checkbox label { display: block; width: 100%; height: 100%; background: yellow; } .checkbox input:checked + label { background: green; } .box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: pink; } </style> <script> $('.box').hammer().on('tap', function(e){ $(this).hide(); }) $('label').hammer().on('tap', function(e){ $('.box').show(); }) </script> 

Check how on the tap, the label below switches (ONLY MOBILE!). This is not happening on the Internet, it is due to the fact that the own click event is fired on the label, because it is displayed at the tap position within 400 meters of the touchstart event.

Also try changing the click event on the shortcut to your own click event . It is also incorrectly called (ONLY MOBILE!).

Other instances that I noticed happen differently than click events, and labels are input fields in which the text input field is focused (and the keyboard pops up) as soon as it is displayed behind the tap event.

Using preventDefault and stopPropagation does not fix this problem, since it is not a problem with bubbling the event, and the prevented event is actually a “click”, where, since we need to stop, it is something like a range of click / mousedown / touch. It seems to be happens both with hammerjs v1 and v2 (v1 with e.gesture.preventDefault() etc. Doesn’t work either).

How to avoid this?

Answer 1

After some feedback from the creator of Hammer.js, Jorik , here are two different solutions:

Solution 1

clickbuster.js , which prevents Default and stops Propagation on click events occurring at the same position during a specific timeframe after the touchhend event. This seems to work just fine for preventing click-bound events and preventing tagging marks. not working to prevent resource concentration. Works for both Hammer v1 and v2. just paste the script and handle the rest.

Decision 2

 e.gesture.srcEvent.preventDefault() 

which prevents default in the event of the native touch screen. It seems more reliable, and also works on an input problem. only works with hammer v2. Must be called inside all .on ('tap') binds