移动端click延迟解决方法

首先要知道为什么移动端的click会迟钝?

谷歌的开发者文档《300ms tap delay, gone away》可以找到原因

移动端要判断是不是双击，所以单击之后不能够立刻触发click，要等300ms，直到确认不是双击了才触发click。所以就导致了click有延迟。

方法1

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

就是把viewport设置成设备的实际像素, 就不会有这300ms的延迟了, 并且受到了IE/Firefox/Safari(IOS 9.3)的支持，也就是说现在的移动端开发可以不用顾虑click会比较迟钝的问题。

 

方法2

设置initial-scale=1.0，在Chrome上是可以生效，但是Safari不会:

<meta name="viewport" content="initial-scale=1.0">

 

方法3

设置CSS：

html {

　　touch-action: manipulation;

}

这样也可以取消掉300ms的延迟，Chrome和Safari都可以生效。