移动端的浏览器说,为了等你是不是要放大这个页面,我他喵的等了你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)。