苹果浏览器移动端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>
苹果浏览器移动端click事件延迟300ms的原因以及解决办法的更多相关文章
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端click事件延迟300ms问题
因为历史原因,移动端点击事件会有300ms延迟,来判断用户是连续双击缩放还是点击跳转.即如果300ms内连续点击两次,则会理解为对页面进行缩放操作(当然前提是移动端页面设置为可缩放的):在一次点击之后 ...
- 移动端click事件延迟300ms该如何解决
window.addEventListener( "load", function() { FastClick.attach( document.body ); }, fa ...
- 移动端click事件出现300ms延迟
问题分析: 双击缩放是指手在屏幕上快速点击两次,iOS自带的Safari浏览器会将网页缩放至原始比例.当用户在屏幕上单击某元素时,浏览器会先捕获此处单击,但浏览器不知道用户是要单击链接还是要双击该部分 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- 移动端的传统click事件延迟和点透现象
一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...
- fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
随机推荐
- 023-PHP常用数组函数
<?php $colors = array("red", "green", "blue","yellow"); p ...
- css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)
一.原始的居中方法是把div换成table <div style="width: 500px; height: 200px; border: solid 1px red; text-a ...
- 电影网站的电影m3u8源址分享(存储于mysql数据库,可直接应用在电影网站上使用)
说明: 1.包含一个films.sql文件,基于mysql5.6的数据表导出文件. 2.该sql文件里面包含一个mysql数据表films,内含35000部电影m3u8源地址. 3.films数据表包 ...
- sublime text快速运行浏览web/html页面
安装View In Browser插件 快捷键 Ctrl+Shift+P(菜单栏Tools->Command Paletter),输入 pcip选中Install Package并回车,输入Vi ...
- ACM-Divide Tree
题目描述:Divide Tree As we all know that we can consider a tree as a graph. Now give you a tree with n ...
- Inheritance and the prototype chain 继承和 原型 链
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Inherita ...
- jmeter --- 压测时,如何让串联压测多个接口
1.新建测试计划,在测试计划里勾选“独立运行每个线程组” 2.分别在每个线程组,添加聚合报告,以得到每个线程组的压测结果 3.设置不同接口压测的vu等,并为每个线程组,设置合理的启动延迟时间
- UVA - 1213 Sum of Different Primes (不同素数之和)(dp)
题意:选择k个质数,使它们的和等于n,问有多少种方案. 分析:dp[i][j],选择j个质数,使它们的和等于i的方法数. #pragma comment(linker, "/STACK:10 ...
- cvthreshold 的运用
什么是阈值? 最简单的图像分割的方法. 应用举例:从一副图像中利用阈值分割出我们需要的物体部分(当然这里的物体可以是一部分或者整体).这样的图像分割方法是基于图像中物体与背景之间的灰度差异,而且此分割 ...
- React yarn安装umi后 umi -v查询版本失败
采坑描述:yarn全局安装模块后但仍提示无法找到 解决: 1.先查看一下yarn的bin目录,输入yarn global bin 2.然后将该路径加入到path中,对于windows中直接将该目录加入 ...