The M-end encounters a bit of penetration again

It can be seen that the tap of zepto through the touch events bound to the document to complete the TAP event simulation, and the tap event is bubbling to document on the trigger

The Tap event (Touchstart\touchend) that is clicked on when it is completed needs to be bubbling to the document before it is triggered, while the user's hand touches the screen (Touchstart) and leaves the screen (touchend) before bubbling to document. The Click event is triggered because the click event has a delay trigger (which is why the mobile does not use the Click for tap) (presumably 300ms, in order to achieve the design of Safari's double-click event), so after executing the tap event, The selected component is immediately hidden, when the Click event is still in the delay of 300ms, when the 300ms arrives, the click is actually not complete but hidden after the element below, if the element is directly below the binding of the Click event will be triggered at this time, If the Click event is not bound, then there is no click, but just below the input box (or select box or radio check box), click the default focus and pop up the input keyboard, there is a point through the phenomenon above.

3, point through the solution:

Scenario One: It's very direct. There's a fastclick on GitHub that can be perfectly solved Https://github.com/ftlabs/fastclick

Introduce Fastclick.js, because the Fastclick source code does not depend on other libraries, so you can add directly to the native JS before

1 Window.addeventlistener ("Load", function () {2     Fastclick.attach (document.body); 3}, False);

Or have zepto or JQM js inside add

1 $ (function () {2     Fastclick.attach (document.body); 3});

Of course, that's require:

1 var Fastclick = require (' Fastclick '); 2 Fastclick.attach (document.body, Options);

Scenario Two: Replace the tap event with Touchend and block the default behavior of Touchend preventdefault ()

1 $ ("#cbFinish"). On ("Touchend", function (event) {2     //A lot of processing such as hiding something 3     event.preventdefault (); 4});

Scenario Three: Delay a certain amount of time (300ms+) to handle the event

1 $ ("#cbFinish"). On ("Tap", function (event) {2     setTimeout () (function () {3     ///a lot of processing such as 4},320 of what is hidden     ); 5});    

This method is actually very good, can be used in combination with fadeinin/fadeout and other animations, can make excessive effect

Theoretically, the above method can solve the tap problem perfectly, if it's stubborn enough, click

The M-end encounters a bit of penetration again