Several solutions to point-penetrating problems of zepto tap events

1. What is "the point of penetration"?

You may have encountered a pop-up layer on the list page, a popup layer with a close button, and after you click the button to close the popup layer, the content below the button will also perform a click event (or Open link). This is defined as a "point through" phenomenon.

In the previous project encountered a problem such as: the Click on the pop-up selection component in the upper right corner of the completion will let the completion of the input box after the focus, pop-up input keyboard, that is, the point of the

2, why will there be a point of penetration?
This needs to be seen from the source of Zepto (or JQM) about Tap implementation method:

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 perfectly solve the tap problem, and if it does not, use the click

Several solutions to the problem of point penetration for tap events in Zepto