300ms Click Delay

The 300ms click delay on mobile devices is due to the ability to perform double-tap zoom operations. Therefore, after a click event, the browser waits for 300ms to see if the user performs another click, in order to determine whether the action is a single tap or a double tap. If we replace the click event with the touchstart event, it can cause some problems. The touchstart event is triggered as soon as the user touches the screen, sometimes even when the user intends to scroll the screen. Additionally, if there are two overlapping elements, A and B, and the touchstart event of element A is bound to a callback function that hides element A itself, then when element A is clicked and disappears, the event sequence is touchstart -> touchend -> click. If there is no second click within 300ms, the click event will be triggered. However, since element A has disappeared, the click event will be triggered on element B. If element B is a link or has a click event bound to it, the default behavior of element B or the bound event callback will be unexpectedly triggered. This is known as the click-through problem. To solve this problem, we still need to address the 300ms delay of the click event.

Solutions

Disable Zooming

By completely disabling zooming, the double-tap zoom functionality will be disabled, and the browser will remove the 300ms click delay. However, in this case, the pinch-to-zoom functionality will also be disabled.

<meta name="viewport" content="user-scalable=no">
<!-- or -->
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">

Change the Default Viewport Width

If the browser encounters a page that includes width=device-width, which means the viewport width is equal to the device width or set to a value smaller than the viewport value, the double-tap zoom behavior will be disabled, and therefore, the 300ms click delay will also be eliminated. This solution does not completely disable zooming, but only disables the browser's default double-tap zoom behavior. Users can still zoom the page using the pinch-to-zoom gesture.

<meta name="viewport" content="width=device-width">

touch-action

The touch-action property in CSS is used to define how touch-screen users can manipulate the area of an element. It allows the removal of the touch delay for specific elements or the entire document without disabling zooming.

touch-action: none;
/* Browser compatibility: https://caniuse.com/#search=touch-action */

FastClick

FastClick is a lightweight library developed by FT Labs specifically to solve the 300ms click delay problem on mobile browsers.

document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
}, false);
// Source: https://github.com/ftlabs/fastclick

Daily Question

https://github.com/WindrunnerMax/EveryDay

References

https://www.cnblogs.com/shytong/p/5463673.html https://www.cnblogs.com/shiyou00/p/10410935.html https://blog.csdn.net/qq_41047322/article/details/81287325