移动端300毫秒延时问题

这个问题也很经典，本人在18年的时候被问到过，当时第一次遇到经一位面试官解释后有了了解，以一个场景来说就是旧版本手机浏览器在触发click事件会有300ms左右的延迟，这个是故意而为之，当时会导致的问题一个就是体验不好，另一个就是点击穿透（比如手点击了上层，这时我通过代码手段隐藏了上层元素，300ms后，下层元素则会响应这个click事件）。

值得注意的是到现在大多数浏览器已经在内部优化了，比如Chrome

快速响应被认为是UI交互中很重要的一个环节，调查显示100ms是为用户带来流畅体验的上限。（意味着超过100ms的响应，用户就会开始感觉卡顿）

背景

出现300ms的原因就是浏览器要区分用户是要双击进行缩放，还是点击。如果300ms内没有2次点击的话，就执行点击操作，否则执行缩放操作，这是iPhone引入的，在当时看是一个很棒的交互。毕竟手机能显示网页已经很难得了，那是专门提供移动网站的也不多。

随着技术的普及和发展，300ms延时的问题就显得很突出了。如何解决呢？

解决方案

禁止缩放

既然300ms的保留是为了网页的缩放，那干脆禁用网页缩放得了，将移动端适配方案交给开发者。

1 2	<meta name="viewport" content="user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1">

简单暴力，但引入的问题就是网页不能缩放了，有的手机默认宽度是980px（为了适配桌面端网页），这样导致本来按照移动端适配的网站显得很小

所以还要在设置网页宽度为设备宽度：

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

我们仍可以通过双指进行缩放

Pointer-Events

a, button, .myelements
{
	-ms-touch-action: manipulation;	/* IE10  */
	touch-action: manipulation;		/* IE11+ */
}

参考

https://www.telerik.com/blogs/what-exactly-is.....-the-300ms-click-delay

https://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/

https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away

Codog

移动端300毫秒延时问题

背景

解决方案

禁止缩放

Pointer-Events

相关解决库

参考