首先要知道为什么移动端的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都可以生效。