Penetrating analysis of tap events in Zepto

The first is what happens when the Zepto (tap) event penetrates:

When a pop-up layer is hidden or moved by tap, it triggers the Click event (click) and the default behavior of some tags (a tag's jump, input gets focus).

Reason:

Zepto tap events are simulated by listening to a touch event bound to the document, and the tap event is triggered on the document and then clicked on when the Tap event (Touchstart\touchend) is completed. Need to bubble to document to trigger, and before bubbling to document, the user Hand touch screen (Touchstart) and left screen (touchend) is triggered by the Click event, because the click event has a delay trigger ( This is why the mobile does not use the click and the tap, which is probably 300ms, in order to implement the Safari's double-click event Design, so after the tap event, the pop-up selection component is immediately hidden, when the Click event is also in the delay of 300ms, When the 300ms arrives, the click is not actually finished but hides the element below, if the element that is directly below the binding of the Click event will be triggered at this time , if there is no binding click event, when there is no click, but directly below the input box ( Or select Select box or single check box), click the default focus and pop up the input keyboard, there is the above point penetration phenomenon.

Touchstart-->touchmove-->touchend-->click

The specific solutions are as follows:

1) Use a library called Fastclick on GitHub to replace the tap event of Zepto, but I've heard of a pit, but I haven't met it yet. For more information, see: Fastclick causes the Click event to fire two times

2) Monitor the Touchend event and use Preventdefault () in the event to block bubbling (always block bubbling).

function (e) {  // Use the Touchstart event here can also be    $ ('. Sec_ui_dlg '). Remove ();    $ (". Dlg_bg"). Remove ();    E.stoppropagation ();});

3) Use CSS3 Pointer-events=true,pointer-events=none switch to achieve; (deprecated)

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, feel good;
$ (ID). fadeIn (300); (preferably up to 400).
5) Tap after delay 350ms hide mask (better use click)

Minimal changes, the drawback is that the hidden mask is slow, 350ms still can feel the slow

Only need to deal with mask, the changes are very small, if the requirements are not high, use this relatively labor-saving

6) 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 makes it possible to call directly in the process of execution.
Div.on (_tap, function () {...})

7) The next worst-case scenario: Use the click directly. Because of the 300ms latency, any custom interaction within the page will be increased by 300 millisecond delay, think slow

Without touch there will be no touch 300ms trigger Click Problem, if the interactivity is not high can do so, strongly not recommended , fast is always good

Penetrating analysis of tap events in Zepto