为什么存在延迟?

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

     引入插件步骤

①在HTML页面中添加

  1. <script type='application/javascript' src='/path/to/fastclick.js'></script>
 

注:必须在页面所有Element之前加载脚本文件先实例化fastclick
  ②在JS中添加fastclick的身体,推荐以下做法:

  1. if ('addEventListener' in document) {
  2. document.addEventListener('DOMContentLoaded', function() {
  3. FastClick.attach(document.body);
  4. }, false);
  5. }

如果你使用了JQuery,那么JS引入就可以改用下面的写法:

  1. $(function() {
  2. FastClick.attach(document.body);
  3. });

如果你使用Browserify或者其他CommonJS-style 系统,当你调用`require('fastclick')`时,`FastClick.attach`事件会被返回,加载FastClick最简单的方式就是下面的方法了:

    1. var attachFastClick = require('fastclick');
    2. attachFastClick(document.body);

fastclick.js插件使用简单说明的更多相关文章

  1. fastclick.js插件使用

    引入插件步骤 ①在HTML页面中添加  <script type='application/javascript' src='/path/to/fastclick.js'></scr ...

  2. moment.js插件的简单上手使用

    开发过程中看长篇幅的技术文档是件多么影响多发效率的事情丫,哼哼,人家明明只是想用个简单的功能而已丫,下面文档很好的解决了这个问题,yeah~~~ 一.monent.js时间插件 1.Moment.js ...

  3. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

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

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

  5. fastclick.js介绍

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

  6. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

  7. fastclick.js源码解读分析

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

  8. 解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js

    1 为什么会发生延迟300毫秒的问题 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick ...

  9. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

随机推荐

  1. 第三十六篇-FloatingActionButton的使用

    效果图: 准备两张图片,一张作为桌面背景,一张作为那个悬浮的加号.放在mipmap下面. 首先,添加Imageview作为桌面背景,并设置扩充整个屏幕.接着,添加一个悬浮按钮,放在右下角,可以对悬浮按 ...

  2. 第二节,神经网络中反向传播四个基本公式证明——BackPropagation

    假设一个三层的神经网络结构图如下: 对于一个单独的训练样本x其二次代价函数可以写成: C = 1/2|| y - aL||2 = 1/2∑j(yj - ajL)2 ajL=σ(zjL) zjl = ∑ ...

  3. struts2 对EL的改变

    Struts2对EL的改变 1.Struts2中使用EL的问题: 前提: 我们应该知道,如果我们没有往值栈(根)中放入数据的话,那么我们的动作类默认是在值栈的栈顶 2.关于EL问题的分析: 分析:   ...

  4. Luogu P3355 骑士共存问题

    题目链接 \(Click\) \(Here\) 二分图最大独立集.对任意两个可以相互攻击的点,我们可以选其中一个.对于不会互相攻击的,可以全部选中.所以我们只需要求出最大匹配,根据定理,二分图最大独立 ...

  5. 关于Tcpdump抓包总结

    一.简介 tcpdump是一个用于截取网络分组,并输出分组内容的工具.凭借强大的功能和灵活的截取策略,使其成为类UNIX系统下用于网络分析和问题排查的首选工具 tcpdump提供了源代码,公开了接口, ...

  6. 苹果中国全系降价:iphone最高降500元,用户可退差价

    本文首发于:风云社区SCOEE(社区旨在普惠软件.图片.音乐.视频.素材.文档等互联网资源.为大众提供多样化的服务,以及主要涵盖学术科学.电脑技术.文化人文.体育健身等领域的知识和信息,获得用户的支持 ...

  7. BZOJ2006 ST表 + 堆

    https://www.lydsy.com/JudgeOnline/problem.php?id=2006 题意:在长度N的序列中求K段长度在L到R之间的区间,使得他们的和最大 很容易想到要求一个前缀 ...

  8. protobuf 编译安装

    1.protobuf是google公司提出的数据存储格式,详细介绍可以参考:https://developers.google.com/protocol-buffers 2.下载最新的protobuf ...

  9. Oracle存储过程procedure in、out、in out 模式参数【不发布,纯转】

    Oracle存储过程procedure in.out.in out 模式参数 Oracle存储过程基本语法介绍 注意存过不会自动提交,需要在存过本身添加commit; rollback;等语句

  10. 他山之石--机器学习 step by step

    练习使用的数据 diabetes.csv 备用百度网盘地址 输入变量与输出变量均为连续变量的预测问题是回归问题: 输出变量为有限个离散变量的预测问题成为分类问题: 其实回归问题和分类问题的本质一样,都 ...