The click delay on the mobile terminal is 300 milliseconds----FastClick usage
Why use FastClick?
By default, the browser on the mobile device will trigger the click event after the user clicks the screen with a delay of about 300 milliseconds. This is to check whether the user is double-clicking.
Origin of the problem
This goes back to early 2007. On the eve of the release of the first iPhone, Apple encountered a problem: the website at the time was designed for large-screen devices. So Apple's engineers made some agreements to deal with the problem of browsing desktop sites on a small screen like the iPhone.
The most famous of these is the double tap to zoom, which is also the main reason for the above-mentioned 300 millisecond delay. Double-tap to zoom, as the name suggests, is to quickly tap twice on the screen with your finger, and the Safari browser that comes with iOS will zoom the webpage to the original ratio.
So what does this have to do with the 300ms delay?
Assume such a scenario. The user clicks a link in iOS Safari. Since the user can double-click to zoom or double-click to scroll, when the user clicks the screen once, the browser cannot immediately determine whether the user really wants to open the link or wants to perform a double-click operation. So iOS Safari waits 300 milliseconds to see if the user taps the screen again.
Given the success of the iPhone, other mobile browsers have copied most of the conventions of the iPhone Safari browser, including double-tap to zoom, and almost all mobile browsers now have this feature. In the past, when people just came into contact with the mobile page, they would not care about the 300ms delay problem when they were happy, but now the touch interface is springing up, and users have higher requirements for the experience. It was unacceptable.
Brutal solution: disable zoom
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
or
<meta name="viewport" content="width=device-width, user-scalable=no">
This is a simple and crude type. Although it seems perfect, it has a fatal flaw. When you have to completely disable zooming to achieve your goal, you will be dumbfounded. This solution is only feasible for interactive interfaces in specific scenarios. Most of the others situation, this method is not feasible.
Also: The Chrome development team announced a while back that, in Chrome 32, they will disable double-tap zoom on pages that include width=device-width or set it to a smaller value than the viewport. Of course, there is no 300 ms click delay without double tap to zoom.
To use this method, zooming must be completely disabled to achieve the goal. Although most mobile terminals can solve this delay problem, some Apple phones still cannot.
In order to respond to the user's click event immediately, FastClick debuted
FastClick is a lightweight library developed by FT Labs to solve the 300 millisecond click delay problem of mobile browsers. In short, when FastClick detects a touchend event, it will immediately trigger a simulated click event through a DOM custom event, and block the actual click event triggered by the browser after 300 milliseconds.
Use of FastClick
1. Install FastClick
Install using npm
npm install fastclick
Reference fastclick.js on the page
<script type='application/javascript' src='/path/to/fastclick.js'></script>
Pure Javascript version
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
JQuery version
$(function() {
FastClick.attach(document.body);
});
Common JS-like module system approach
var attachFastClick = require('fastclick')
attachFastClick(document.body)
Calling require('fastclick') returns the FastClick.attach function
2. Use needsclick to filter specific elements
If there are some specific elements on the page that do not need to use fastclick to trigger the click event immediately, you can add needclick to the class of the element
<a class="needclick">Ignoted by FastClick</a>
3. Cases where fastclick is not required
<1> FastClick will not add monitoring events to PC browsers
<2> For the Android version of Chrome 32+ browser, if you set the value of viewport meta to width=device-width, in this case the browser will trigger the click event immediately without a delay of 300 milliseconds.
<meta name="viewport" content="width=device-width, initial-scale=1">
<3> For all versions of the Android Chrome browser, if the value of the viewport meta is set to user-scalable=no, the browser will also trigger a click event immediately.
<4> IE11+ browser sets the css attribute touch-action: manipulation, which will prohibit double-click events in certain tags (a, button, etc.), and IE10 is -ms-touch-action: manipulation