结论就是,不需要继续使用 FastClick 了,参见文章。
300毫秒是移动开发方兴未艾的时候的设计缺陷,实际上相关的标准早就修复了这个问题,方式如下:
1.viewport
<meta name="viewport" content="width=device-width">
浏览器检测到这个标签,会认为这是一个已经对移动端做了良好适配的页面,会禁用双击缩放.也就不存在点击延迟问题.
2.touch-action
html { touch-action: manipulation; }
这个属性用于指定元素对 touch 事件的响应方式,参见文档。
另外,在开发《AUPRES 售卖机 v2》项目时,发现如下问题及解决方案。
想给作为按钮的 div 增加一些点击效果,发现给 div 增加 :active 样式并不生效(配合 transition)。经过测试发现,原来是 FastClick 的问题,当去掉 FastClick 相关内容(FastClick.attach(document.body))后,在 Chrome 和安卓真机上就没问题了。但是 iOS 手机上还是没有动画效果,发现原来是这个原因:
解决办法如下:
// 这应该是一个全局变量 const ACTION_EVENT = 'touchend'; $('#btn').on(ACTION_EVENT, function(e) { // doSomething... });
当然,这个 ACTION_EVENT 根据需要决定是 click / touchstart / touchend,基于以上就决定不再使用 FastClick 了,但可能会需要 isMobile 来配合。