苹果浏览器移动端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 ...
随机推荐
- 找不到xml、找不到类
解决java.lang.ClassNotFoundException 解决 java.io.FileNotFoundException: class path resource [xxx.xml] ...
- cf 762D. Maximum path
天呢,好神奇的一个DP23333%%%%% 因为1.向左走1格的话相当于当前列和向左走列全选 2.想做走超过1的话可以有上下走替代.而且只能在相邻行向左. 全选的情况只能从第1行和第3行转移,相反全选 ...
- 11.json
import json # json反序列化 # json_str = '{"name":"qiyue","age":18}' # stud ...
- [转载]Jquery Chosen 插件动态生成option或重新绑定
$(".chosen—select").find("option[value='1']").attr("selected", "s ...
- 153-PHP htmlentities函数
<?php //定义一个HTML代码字符串 $str=<<<HTM <a href=#><b><i>到一个网址的链接</i>&l ...
- 腾讯云服务器上搭建Jenkins配置邮箱通知
1,Jenkins 点击 系统管理 2,点击系统管理 3,配置系统管理员邮件地址 5,配置 Extended E-main Notification,(用户名不需要邮箱后缀“@163.com”, SS ...
- spring源码 ListableBeanFactory接口
ListableBeanFactory接口表示这些Bean是可列表的 /* * Copyright 2002-2016 the original author or authors. * * Lice ...
- 文献及代码阅读报告 - SS-LSTM:A Hierarchical LSTM Model for Pedestrian Trajectory Prediction
概览 简述 SS-LSTM全称Social-Scene-LSTM,是一种分层的LSTM模型,在已有的考虑相邻路人之间影响的Social-LSTM模型之上额外增加考虑了行人背景的因素.SS-LSTM架构 ...
- comparable and comparator 比较
转:http://www.yingjiesheng.com/job-002-393-132.html 一.前言 在Java集合框架里面,各种集合的操作很大程度上都离不开Comparable和Com ...
- 支持 UTF-8 中文的串口调试工具
最近使用 mdk526,编辑设置使用 utf-8,编辑窗口中文正常,但是编译的时候提示 warning: #870-D: invalid multibyte character sequence,解决 ...