移动端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 );}, false );
attach方法虽可在更具体的元素上调用,直接绑定到body上可以确保整个应用都能受益。当 FastClick 检测到当前页面使用meta设置了user-scalable=no或者 touch-action 属性的解决方案时,会静默退出。可以说,这是真正的跨平台方案出来之前一种很好的变通方案。

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

推荐阅读更多精彩内容