Mobile Web,tap and click events

The difference between tap and click is triggered automatically when clicked, but on the web side of the phone, click will have 200~300 Ms. The delay comes from judging double-click and long-pressing, because only the default wait time ends to determine that no subsequent action occurs before the click event is triggered. So touch events react faster and experience better.
Singletap and Doubletap represent single clicks and double clicks, respectively.
Tap encapsulates the processing of three events for Touchstart, Touchmove, Touchend (after Touchstart if there is a touchmove to cancel the tap event) Click Simply binds the browser's click event.

Tap incident Point through the problem click will trigger the non-current layer of click events, this is the point. For example: Click a but also trigger the Click event of the B element, because the tap event is bound by the document Touchstart and Touchend event implementation, $ ('. A '), when the Touchend event bubbles onto the document after executing $ ( This). Hide (), at this time $ ('. B '), is at the top of the page, and now touchend bubbles to the document, and $ ('. B ') is at the front of the page, and then the click event is triggered. Third, tap incident point through the solution

There is a library called Fastclick on the 1.github that can circumvent the latency response of the Click event on a mobile device Https://github.com/ftlabs/fastclick it into a page with a script tag (which supports AMD, can be introduced in accordance with the AMD specification, with the Require.js module loader, and initialized on the body when the DOM is ready, such as:
$(function(){
new FastClick(document.body);
})
Then bind the Click event to an element that requires "no lag click" (Note that the tap event is no longer bound to zepto).
It can also be initialized on a DOM without initializing it on the body, so that only a DOM and its child elements can have a "no delay" click.
Because the Fastclick source does not depend on other libraries, you can add them directly before the native JS
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
Or have zepto or JQM js inside add
$(function() {
FastClick.attach(document.body);
});
Of course, that's require:
var FastClick = require("fastclick");
FastClick.attach(document.body, options);
In practice, when the element is bound to Fastclick, click responds faster than tap.
2. For cases where the B element itself has a default click event, apply Touchend instead of the tap event and block the default behavior of the A element touchend preventdefault (), thereby preventing the Click event from being generated.
$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
For cases where the B element itself does not have a default click event (no a tag, etc.), you should use the touch event uniformly, unify the code style, and because the click event is much more delayed on the mobile side, which is detrimental to the user experience, so touch-related events should be used whenever possible.

Delay a certain amount of time (300ms+) to handle events
$("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
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, if it is really stubborn, instead of the click. In particular, to cover the floating layer, because the cover of the floating layer of the Click even if there is a small delay is not related, but there will be a better user experience, so this situation, you can cover the floating layer itself with the click event, so there will be no point through the problem.

How to resolve penetration:

Method One: Replace the tap event of the upper element directly with the Click event (a 300ms delay trigger event occurs)

Method Two: Block the Click event before it is triggered, such as using E.preventdefault () in Touchend events to block subsequent click events

Zepto Why not use E.preventdefault () to solve the penetration problem?

Because Zepto's tap event unification is triggered when the document is Touchend, if you use E.preventdefault () here, the events that are triggered by all elements on the page after touchend are not executed.

Mobile Web,tap and click events