苹果浏览器移动端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 ...
随机推荐
- 15.swoole学习笔记--异步写入文件
<?php //异步写入文件 $content="hello world"; swoole_async_writefile('2.txt',$content,function ...
- Java语言学习总结 扩展篇 包装类的概念及其使用
包装类 包装类的概述 Java提供了两个类型系统,基本类型与引用类型,使用基本类型在于效率,然而很多情况,会创建对象使用,因为对象可以做更多的功能,如果想要我们的基本类型像对象一样操作,就可以使用基本 ...
- ls 查看文件
1.按文件大小查看文件 a.降序:ls -lsh moudaen@morton:~$ ls -lshtotal 20M 20M -rw-r--r-- 1 moudaen 65536 20M Nov ...
- IntelliJ IDEA中,mybatis的配置文件(map.xml)无法编译到class文件夹下
编译工具:IntelliJ IDEA 项目结构:maven 项目框架:SSM 问题:java目录下,mybatis的配置文件(map.xml)无法编译到class文件夹下 问题原因:在idea中,直接 ...
- 基于thinkphp的邮件群发系统的设计
在网上找了很多资料,关于邮件群发系统的开发并没有一个非常好的方案,冥思苦相数日,研究了一套目前使用稍微有点效果的邮件群发系统,特地来分享一下,当然有过有更好的方案,欢迎大家一起讨论,或者私聊一下我. ...
- dns、网关、IP地址,主要是配置resolv.conf\network\ifcfg-eth0
Ubuntu sudo vi /etc/network/interfac 添加 dns-nameservers 192.168.1.254dns-search stonebean.com cent ...
- BZOJ 4901 [CTSC2017]网络
题解: 只会O(n log^2 n) O(n log n)先留坑 不开long long 0 分!!!! #include<iostream> #include<cstdio> ...
- DFS+BFS(广度优先搜索弥补深度优先搜索遍历漏洞求合格条件总数)--09--DFS+BFS--蓝桥杯剪邮票
题目描述 如下图, 有12张连在一起的12生肖的邮票.现在你要从中剪下5张来,要求必须是连着的.(仅仅连接一个角不算相连) 比如,下面两张图中,粉红色所示部分就是合格的剪取. 请你计算,一共有多少 ...
- Python属性和内建属性
属性property 1. 私有属性添加getter和setter方法 class Money(object): def __init__(self): self.__money = 0 def ge ...
- Social GAN代码要点记录
近日在阅读Social GAN文献的实验代码,加深对模型的理解,发现源代码的工程化很强,也比较适合构建实验模型的学习,故细致阅读.下文是笔者阅读中一些要点总结,有关于pytorch,也有关于模型自身的 ...