Addressing the penetration of mobile touch events (Touchstart/touchend)

Scene:

We clicked on the mobile click event Click Compare Touchend there will be a noticeable 300ms delay, why?

The browser waits about 300ms after clicking to determine if the user has a double-click behavior (the phone needs to know if you want to double-click to enlarge the Web content ).

If there is no click in the 300ms, then it is determined that this is a single machine behavior. So we basically use (touchstart/touchend).

However, these events will execute a click event after execution (the specific reason is too cumbersome to explain, this should be from the JS event monitoring mechanism of the fundamental talk about ... In fact, I also understand the limited. ）

Solve:

Solution One: E.preventdefault ()

Yes, this is the way we are familiar with the rotten method, I also write to write to the Dead horse live horse use, on iOS, the effect is very good, the perfect solution to penetrate the click Problem, Andirod effect is not good (so the following method).

Solution two: Using the Pointer-events method

<div class= "Up-overlay" ></div>
<div class= "Under-overlay" ></div>
<div class= "button" ></div>

$ ('. Button '). On (' Touchstart ', function () {

$ ('. Up-overlay '). Hide ();
$ ('. Under-overlay '). Hide ();

Immediately let it not click
$ ('. Under-overlay '). CSS (' pointer-events ', ' none ');

Because the Click event requires a 300ms response, we have time to define 350ms, and the time can be clicked as normal.
SetTimeout (function () {$ ('. Under-overlay '). CSS (' pointer-events ', ' all ')},350)
})

Addressing the penetration of mobile touch events (Touchstart/touchend)