为什么存在延迟?

从点击屏幕上的元素到触发元素的 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. 题解-洛谷P1020P导弹拦截(求单调序列长度的优化)

    https://www.luogu.org/problemnew/show/P1020 (原题链接) 第一问就是求最长不上升子序列的长度,自然就想到了c++一本通里动态规划里O(n^2)的算法,但题目 ...

  2. pytest 1.简单介绍一,安装和如何运行

    一.pytest是一个接口测试框架,试用版起来比较轻便灵活.首先来介绍他的安装: 直接使用命令 : pip install -U pytest 通过命令 :pytest --version  来查看版 ...

  3. POJ 1743 Musical Theme (Hash)

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 33820   Accepted: 11259 D ...

  4. (二叉树 BFS DFS) leetcode 104. Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  5. (进制转换 栈)P1143 进制转换 洛谷

    题目描述 请你编一程序实现两种不同进制之间的数据转换. 输入输出格式 输入格式: 共三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进制数,若n>10n> ...

  6. thinkphp中用ajax对数据库进行操作

    删除和查看详情操作的共同语句:就是怎么显示表? 1.在主体中写表的开头行,想要显示的内容,并且加载数据也要显示的地方也建张表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 & ...

  7. ps: 图层样式;

    图层样式是ps的一项图层处理能力,功能强大,能够简单快捷的制作处立体投影,各种质感以及光影效果. 10种图层样式: (1)投影:将为图层上的对象.文本或形状后面添加阴影效果.投影参数由“混合模式”.“ ...

  8. mysql全备份脚本速查

    mysql全备份脚本 # 快捷备份方式[root@nb scripts]# cat db.backup.sh #!/bin/bashmysqldump -ubackup -pbackuppwd -P3 ...

  9. tomcat插件使用

    1.pom.xml添加插件 <build> <plugins> <!-- tomcat7插件 --> <!-- 注意:目前来说,maven中央仓库还没有tom ...

  10. 数据库基础SQL知识面试题一

    数据库基础SQL知识面试题一 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 如标题所示,本篇博客主要介绍基础知识的面试题.大家可以用来测试面试者的技术水平,由于个人水平所限,难免 ...