移动端click延迟解决方法

Posted 第指南

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端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都可以生效。

以上是关于移动端click延迟解决方法的主要内容,如果未能解决你的问题,请参考以下文章

解决click事件300ms延迟

移动端触屏click点击事件延迟问题,以及tap的解决方案

移动端 click 300ms 延迟,如何解决

移动端常见问题(click 300ms延迟)

解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js

移动端延迟300ms的原因以及解决方案