移动端click事件延迟300ms解决方案

移动端的浏览器说,为了等你是不是要放大这个页面,我他喵的等了你300ms。

开个玩笑,不过就这么回事儿,移动端单击会有延迟就是因为浏览器在判断你是不是需要放大页面 。但同时也造成了一种页面反馈的迟钝。怎么能忍呢?

说2种,解决方案如下:
1、禁止缩放

<meta name="viewport" content="width=device-width, user-scalable=no">
// 关键是 user-scalable = no

2、FastClick
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

简而言之,FastClick 在检测到 touchend 事件的时候,会通过 DOM 自定义事件立即触发一个模拟 click 事件,并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

FastClick 的使用方法非常简单,在 window load 事件之后,在body上调用 FastClick.attach() 即可。

window.addEventListener( "load", function() { 
  FastClick.attach( document.body );
});

attach 方法虽可在更具体的元素上调用,直接绑定到 body 上可以确保整个应用都能受益。

当 FastClick 检测到当前页面使用 meta 设置了 user-scalable=no 或者 touch-action 属性的解决方案时,会静默退出。

可以说,这是真正的跨平台方案出来之前一种很好的变通方案。

就目前而言,FastClick 非常实际地解决 300 毫秒点击延迟的问题,唯一的缺点可能也就是该脚本的文件尺寸 (尽管它只有10kb)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容