对于移动端浏览器,一般对于点击事件都有300ms延迟.
300ms延迟可能带来的问题有:
- 可能感觉系统响应要慢上半拍
- 特殊条件下可能触发点击事件穿透问题
移动端浏览器点击事件300ms延迟缘由
移动端要判断是否是双击,所以单击之后不能够立刻触发click,要等300ms,直到确认不是双击了才触发click。所以就导致了click有延迟。
浏览器解决方案
为了解决300ms延迟,浏览器的开发厂商,提供了一些解决方案。自2014年的Chrome 32版本已经把这个延迟去掉了,通过设置meta标签:
<meta name="viewport" content="width=device-width">
即把viewport设置成当前设备的实际像素,浏览器就没有300ms延迟。据官方说明,这个举动受到了IE/Firefox/Safari(IOS 9.3)的支持,可用来消除页面点击延迟。但对于低版本的浏览器,此方法并不适用。
另外针对chrome浏览器,通过设置initial-scale=1.0,也可以用来消除延迟,但safari无效。
<meta name="viewport" content="initial-scale=1.0">
注意
如果使用浏览器解决方案, 是不会再有双击缩放功能的哈
文章参考
关于移动端300ms延迟及解决方案 | 焦春晓的blog (jiaochunxiao.github.io)
5步解决移动设备上的300ms点击延迟 - Van小时 - 博客园 (cnblogs.com)
如何解决移动端Click事件300ms延迟的问题? - 知乎 (zhihu.com)