跳至正文

是否还需要继续使用 FastClick

标签:

结论就是,不需要继续使用 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 来配合。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注