There is a time delay for the click event on the mobile terminal. What is the delay time? How to solve it?

One 、 Mobile 300ms Reason for click delay

2007 Beginning of the year . Apple is releasing its first iPhone On the eve of , There's a problem ： At that time, websites were designed for large screen devices . So Apple's engineers made some agreements , Answer iPhone This kind of small screen browsing desktop site problems .
The most famous , Double click zoom (double tap to zoom), This is also the case 300 The main reason for millisecond delay .
Double click zoom , seeing the name of a thing one thinks of its function , That is, use your fingers to click on the screen twice ,iOS Self contained Safari The browser will zoom to the original scale . So this and 300 What does millisecond delay have to do with ？ Suppose such a scene . The user is in iOS Safari Inside, I clicked on a link . Because the user can double-click to zoom or double-click to scroll , When the user clicks the screen once , The browser can't immediately tell if the user really wants to open the link , Still want to double-click . therefore ,iOS Safari Just wait 300 millisecond , To determine if the user clicked the screen again . Whereas iPhone The success of the , Other mobile browsers have copied iPhone Safari Most of the browser conventions , Including double-click zoom , Almost all mobile browsers now have this function . Before people just touched the mobile page , When you are happy, you often don't care This 300ms The delay problem of , But now touch The interface is springing up , Users have higher requirements for experience , this 300ms It's slowly becoming unacceptable .
in other words , The mobile browser will have some default behaviors , For example, double click to zoom 、 Double click to scroll . These behaviors , In particular, double-click zoom , It is mainly designed for the browsing experience of desktop websites on the mobile end . When the user operates on the page , The mobile browser will give priority to judge whether the user wants to trigger the default behavior .
summary ： That is to say , When the user clicks the mobile terminal screen for the first time , The browser still needs to wait 300ms To determine whether the user has the next operation . That is, to judge whether to click or double-click during the current operation .
Two 、 Solution
One 、 Disable zoom

  <meta name="viewport" content="user-scalable=no">  <!-- Indicates that the user cannot zoom -->
  <meta name="viewport" content="initial-scale=1,maximum-scale=1">  <!-- The screen initialization zoom ratio is 1-->

stay html Add in code meta attribute , Indicates that scaling is completely prohibited , At this point we click , Will correspond , No existence 300ms The problem of delay . If we want to use two fingers to zoom , It's also forbidden , This is not what we want .
Two 、 Change the default viewport width
Generally, the default window size of our browser is larger than the actual window size of our browser , Probably 980px, If we set the default window size equal to the browser size , At this point, there is no need to double-click to zoom .

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

This is a little better than completely disabling scaling , That is, you can zoom with two fingers .
3、 ... and 、touch-action
touch-action In this way css style , It can help us solve the problem of the default behavior of the browser , Because we know 300ms Delay is the default behavior . We can set... For the specified element touch-action:none Indicates that the default behavior can be ignored , That is to say 300ms Not valid for this element .
Four 、FastClick
FastClick Event is to solve the browser problem 300ms The question of delay , When the user triggers touchend When an event is , At this point will pass DOM The custom event emits a click event , And will 300ms After click The incident stopped .