Zepto tap penetrates bugs and resolves mobile click-through issues

When two layers overlap, or there is a pop-up window, when using the Zepto tap event, clicking on the above layer triggers the next layer of events, especially if the bottom of the input box will "penetrate",

Cause of the phenomenon:

Zepto's tap simulates the tap event by listening to a touch event bound to the document, and the tap event is triggered by bubbling to the document

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.

here's how to fix it:

1, the use of GitHub on a library called Fastclick;

2, monitor Touchend event, and use Preventdefault () to prevent bubbling in the event;

$ (". Js-egg-close"). On ("touchend", function (e) {//The use of Touchstart events here is also possible,
E.preventdefault ();
$ ('. Sec_dlg_eggs '). Remove ();
$ (". Eggs_bg"). Remove ();
});

3, the use of CSS3 pointer-events=true,pointer-events=none switch to achieve;

4. Delay a certain amount of time to handle the event. I test is more than 320 milliseconds will not appear penetrating, with jquery animation (FadeIn (), FadeOut ()) and other mates, personal feeling good;

$ (ID). fadeIn (300);

5. If it doesn't work, the ultimate solution is to use Click to tap;

Set the Click event to _tap

_tap = Touchend in document? "Touchend": "Click"

This allows you to call Div.on (_tap, function () {}) directly during execution.

Zepto tap penetrates bugs and resolves mobile click-through issues