Fastclick

fastclick.js解决了什么问题?

自己接触WebApp开发的前期, 总感觉WebApp上的按键操作不如NativeApp的灵敏, 好像有那么一小点延迟.

后来才知道, 这是移动端浏览器特意设计的延迟 -- 在移动端, "用户的点击"和"点击生效"之间会有300ms的延迟.

这一设计是为了支持双击操作(比如双击放大页面). 如果用户在300ms内点击了第二下, 浏览器则会认为用户想要双击而不是单击.

移动端浏览器是这么处理这300ms延迟的.

  1. 用户点击屏幕, 触发touchstart事件.
  2. 用户停止点击, 触发touchend事件.
  3. 浏览器等待300ms, 看用户是否会点击第二次.
  4. 如果没有第二次点击, 则触发click事件.

fastclick.js做的事情就是消除这300ms的延迟, 让你的WebApp体验更加像是NativeApp.

如何使用fastclick.js?

非常简单, 照着Fastclick的README做就好了.

除了直接通过<script>标签引入, 它还支持AMD, CommonJS模块系统.

如果你jQuery的话, 引入fastclick后, 只需要下面这样就OK了.

$(function() {

    FastClick.attach(document.body);

});

我遇到的一个fastclick的坑.

其实这才是本文的主要目的. 今天碰到一个奇怪的问题: 我发现在桌面版Chrome上, click可以正常触发focus事件; 但是打开Mobile Device Mode之后, click后就无法再触发focus事件了!

最后把问题定位到了fastclick, 如果不用它就 不会出现这个问题.

另外, 我还发现, 在我的iPhone上, 只有时间大于100ms, 小于1s的click才可以触发focus, 时间更短或更长的click则都不会.

具体为什么会有这个问题, 其实我还不清楚=,.=. 但是我做了不少尝试.

首先是needsclick, 这个README里面有写. 后来我又在源代码里找到了needsfocus. 这两个类可以禁用fastclick的hack, 但是有个缺陷:

div.needsclick

  div.inner

这样的结构中, 用户点击.needsclick可以正常触发.needsclick的focus事件, 但是如果点到了.inner就无法触发.needsclick的focus事件了.

最后我还是选用了简单粗暴的方法: 给元素绑上click事件, 在click中触发focus.

参考

  1. Hybrid Apps and the Curse of the 300ms Delay

关于fastclick.js的更多相关文章

  1. fastclick.js介绍

    原文地址:http://www.uedsc.com/fastclick.html 用途:去掉移动端click事件的300ms的延迟. 延迟为什么存在   …在移动浏览器中,当你点击按钮的单击事件时,将 ...

  2. [转] iOS11.3 fastclick.js相关bug

    最近遇到奇异的bug,在ios 11.3移动端页面 input输入框第一次触摸可以弹起键盘,后续再触摸需要很难弹起键盘,或者需要在输入框停一会才能弹起键盘. bug复现条件: 一.ios 11.3中a ...

  3. 移动端点击事件300ms延迟问题解决方案——fastclick.js

    移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...

  4. fastclick.js插件使用简单说明

    为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.     ...

  5. fastclick.js解决移动端（ipad）点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  6. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时，ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  7. fastclick.js源码解读分析

    阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生 ...

  8. JS 插件 fastclick.js 解决手机端click点击延迟

    FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...

  9. html 手机端click 事件延迟问题(fastclick.js使用方法)

    下载地址: fastclick.js 为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击 ...

随机推荐

  1. php正则贪婪匹配与非贪婪匹配一些例子

    http://www.111cn.net/phper/210/55600.htm 贪婪模式匹配的原则是: 在可匹配也可不匹配的情况下, 优先匹配,直到不能匹配成功的情况下,记录备选状态,并把匹配控制交 ...

  2. eclipse项目文件编码格式和项目不一致的修改方法

    eclipse导入了一个项目,并把其属性设置成了UTF-8,但是打开里面的文档之后,发现还是乱码,看了下属性,发现文档竟然还是GBK的编码 于是就百度了下,发现了解决方法,现在和大家分享下,希望能帮到 ...

  3. Google 编码风格

    一.Google JavaScript编码风格 简体中文版 Google JavaScript Style Guide 二.Google HTML/CSS代码风格指南 简体中文版 三.Google C ...

  4. bzoj 1066: [SCOI2007] 蜥蜴

    这道题还是挺好想的,但我一开始还是想错了…… 把每个石柱拆成两个点,一个入度,一个出度,两个点连一条容量为高度的边,这样就可以限制从此石柱上经过的蜥蜴的数量.关于蜥蜴是否单独成点,我是单独当成了一个点 ...

  5. 模板：使用new delete 创建二维数组

    int **arr_matrix = new int*[n]; ; i < n; ++i) arr_matrix[i] = new int[n]; //内容 ; i < n; ++i) d ...

  6. Poj/OpenJudge 1000 A+b Problem C/C++/Java

    1.题意翻译:        输入两个整数a,b (0<=a,b<=10),计算a+b的值并输出.       其中还提到输出不能有多余的内容,即不能加多空格符号等内容,不然会报Wrong ...

  7. 把URL传递参数转变成自定义实体方法

    先定义下要获取的实体: public class InputClass { public long Id { get; set; } public int Status { get; set; } p ...

  8. php二维数组，按照指定的key，去排序value值

    $arr = array( '11'=>array( 'a'=>1, 'b'=>2, ), '22'=>array( 'a'=>3, 'b'=>4, ), '33' ...

  9. PHOTOSHOP 半透明方格

    1.新建60*60的透明文档,在左方和上方用直线工具画白边,存储为图案(编辑/定义图案) 2.新建图层,用油漆桶填充图案 3. 选择若干小方格,填充白色后设置不透明度50%

  10. 深入理解javascript中的闭包!(转)

    1.闭包的经典错误 假如页面上有若干个div,我们想给它每个绑定一个onclick方法,于是有了下面的代码. function A(){ var divs=document.getElementsBy ...