Mobile Web Development-click Touch Tap Differences

There is a penetration problem when using tap on the mobile side

A: Click comparison with Tap
Click and tap will trigger a hit event, but on the mobile web, click will have a 200-300ms delay, so tap instead of click is generally used for clicking events. Singletap and Doubletap represent single clicks and double clicks, respectively
Second: Tap's penetrating processing
Using the tap event of the Zepto framework to circumvent the delay response of the Click event, the Click event will trigger a click on a non-current layer.
Three: the cause of penetration
Question: After HTML5 click on the Q, pop-up B's bullet box
Because the TAP event is implemented through document binding of the Touchstart and Touchend events, $ ('. Q ') is executed when the Touchend event bubbles onto the document after executing $ (this). Hide (); At this time $ ('. B '), At the front of the page.
Now touchend bubbles to the document, and $ ('. B ') is at the front of the page, and then the click event is triggered
Four: Solving penetrating problems
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 enjoy "no lag" clicks
In practice, when the element is bound to Fastclick, click responds faster than tap.
2. Bind the Touchend event to the element and add E.preventdefault () internally;
$demo. On (' Touchend ', function (e) {
Change the name of the event, tap is the body on the trigger, and Touchend is a native event, on the DOM itself will be captured trigger
$demo. Hide ();
E.preventdefault ();//block "default behavior"
});
V: Touch Events
Touch is for touching events on touch-screen phones. Cash most touch screen phone WebKit core provides touch event monitoring
Includes: Touchstart touchmove touchend touchcancel four events
Touchstart touchmove touchend Events can be analogous to the triggering of MouseDown mouseover MouseUp


You can get into a group of communication. ~web Front End Learning Communication Group 21 598399936

Mobile Web Development-click Touch Tap Differences