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

这要追溯至 2007 年初。苹果公司在发布首款 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>

转载于:https://www.cnblogs.com/lhj-blog/p/7864839.html

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

fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
click事件延迟300ms,处理方法-----FastClick
下载地址:https://github.com/ftlabs/fastclick http://amazeui.org/1.x/javascript/fastclick/ 从点击屏幕上的元素到触发元素 ...
fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
MySQL备库复制延迟的原因及解决办法
背景今天有同事问我主从复制延迟会影响高可用切换的 RTO 怎么办,这个不需要做实验,我可以直接回答,所以有了以下赶鸭子的文章,都是一线运维经验之谈,建议四连:点赞.收藏.转发.在看. 复制延迟的原因 ...
fastclick：处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
移动端的click事件延迟触发的原理是什么？如何解决这个问题？
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟会出现点透现象在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
设计方案--移动端延迟300ms的原因以及解决方案
一.前言移动端浏览器提供一个特殊的功能:双击(double tap)缩放. 二.移动端延迟300ms的原因为什么要用触摸事件?触摸事件是移动端浏览器特有的html5事件. 因为移动端的clic ...
滑动翻页效果实现和移动端click事件问题
前述本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文最近做了一个小活动,里面要用到一个效果:滑动翻页. ...
手机端如何阻止苹果浏览器输入框默认放大事件
今天遇到了苹果手机浏览器输入的时候,整个网页会放大,并且不会缩小,暂时还没有找到解决的办法,在继续找找 window.onload = function () { document.addEventL ...

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

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

最新文章

热门文章