700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 苹果浏览器移动端click事件延迟300ms的原因以及解决办法

苹果浏览器移动端click事件延迟300ms的原因以及解决办法

时间:2019-01-31 15:27:00

相关推荐

苹果浏览器移动端click事件延迟300ms的原因以及解决办法

这要追溯至 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。这当中最出名的,当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。

当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。

于是,300 毫秒延迟就这么诞生了。

FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到touchend事件的时候,会通过DOM 自定义事件立即触发一个模拟click事件的click事件(自定义事件),并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

FastClick 非常实际地解决 300 毫秒点击延迟的问题。唯一的缺点可能也就是该脚本的文件尺寸 (尽管它不大)。如果你非常在意这点文件大小,可以尝试一下Filament Group的Tappy!,或者tap.js。两者都相当轻量,能够通过监听tap而非click事件来绕过 300 毫秒延迟。

当然,zepto库函数中,也有一个touch模块,此模块也包含tap事件,可以通过绑定tap来取代click事件。

但是zepto的tap事件会有点透问题。如何解决,请看下篇分解。

接下来,我们来详细了解一个问题:FastClick解决延迟点击的源码解析。

<script type="text/javascript" src="js/fastclick.js" ></script><script>window.addEventListener( "load", function() {FastClick.attach( document.body );}, false );</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。