Click has a 300ms delay on mobile!

Under normal conditions, if no special processing is done, there will be a 300ms delay for the mobile terminal to trigger the click event. In other words, when we click on a mobile page, the page doesn’t react immediately. Instead, it takes 300ms for the click event to occur. In the early days of mobile Web, users did not feel much about the 300ms delay. However, with the development of The Times, users have higher and higher requirements for mobile terminal interactive experience. Now, the mobile terminal delay seriously affects user experience.

Origin of 300ms delay

In 2007, just before the launch of apple’s first Iphone, the company ran into a problem: Websites were designed for large screens that were too small to be viewed properly, so apple engineers made some conventions to fix the problem. The best known of these conventions is double tap to Zoom, which is the source of the 300ms delay. With two quick finger taps on the screen, iOS’s built-in Safari browser zooms the page to its original scale. If the user clicks on a link in iOS Safari. Since the user can double click to zoom or double click to scroll, once the user clicks the screen, the browser can’t immediately determine whether the user actually wants to open the link or whether the user wants to double click. So iOSSafari waits 300 milliseconds to see if the user has clicked on the screen again. Given the success of the iPhone, other mobile browsers have copied most of the conventions of the iPhoneSafari, including double-clicking to zoom, which is now available on almost all mobile browsers. This creates the 300ms delay problem.

The solution

Solution one uses the FastClick plug-in to solve the problem

FastClick is a lightweight library developed by FT Labs to solve the 300-millisecond click delay problem in mobile browsers. The implementation principle of FastClick is that when the Touchend event is detected, the DOM custom event will immediately simulate a click event and block the browser click event after 300ms.

Method of use

Fastclick can be installed using NPM, Component, and Bower. A Ruby version of Gem Fastclick-Rails is also available. NET provides the NuGet package. The most straightforward is to introduce fastClick JS files into the page.

Once the plug-in is downloaded, you can introduce Fastclick.js directly into your page

<script type='application/javascript' src='/path/to/fastclick.js'></script>
Copy the code

Js instance

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded'.function() {
		FastClick.attach(document.body);
	}, false);
}
Copy the code

Method two disables scaling

One drawback of this method is that it completely disables double-click zooming, which doesn’t work when we need to enlarge text or images. Add the following statement to the header of the HTML file:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = no">
Copy the code

User-scalable =no indicates that the page is not scalable, and the browser disables the double click scaling event while removing the 300ms click delay

Scheme three encapsulates a handler function

// Encapsulate tap to solve click 300ms delay
function tap (obj,callback) {
	var isMove = false;// Record whether the finger moves
	var startTime = 0;// Record the time of finger touch
	obj.addEventListener('touchstart'.function(e){
		startTime = Date.now();// Record the touch time
	})
	obj.addEventListener('touchmove'.function(e){
		isMove = true;// Check if the finger is sliding
	})
	obj.addEventListener('touchend'.function(e){
		if(! isMove && (Date.now()-statrTime) < 150){
		callback && callback();
		}
		isMove = false;// take the reverse reset
		startTime = 0; })}; tap(div,function(){ // execute code});
Copy the code

This code can monitor the state of an element click when it occurs, thus avoiding a 300ms delay. The downside of this approach, however, is that you can only solve problems for one element at a time, and complex cases require additional processing using other methods.