FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟。

对于非移动浏览器不启作用,禁用缩放标签。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

引入插件步骤

①在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);

JS 插件 fastclick.js 解决手机端click点击延迟的更多相关文章

  1. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  2. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  3. js插件---video.js如何使用

    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...

  4. js插件---bootstrap-datepicker.js是什么

    js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...

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

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

  6. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  7. 解决IE6下PNG透明的JS插件:DD_belatedPNG.js

    DD_belatedPNG是一款解决IE6下PNG透明的JS插件,支持background-position和background-repeat属性,支持伪类.使用方法: <!--[if lte ...

  8. js实现双指缩放图片 手机端双指缩放图片

    首先引入js文件,需要jq,pinchzoom.js.pinchzoom.js需要在jq环境下使用,可以 <meta name="viewport" content=&quo ...

  9. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

随机推荐

  1. map方法,以及filter方法的使用

    map()方法,会返回一个 jQuery 封装的数组, 这个数组不能直接使用,需要使用 get() 来处理返回的对象以得到基础的数组. 例子: <!DOCTYPE html> <ht ...

  2. 神奇的canvas——点与线绘制的绚丽动画效果

    代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...

  3. Python 的数据表示

    一.常量.变量和对象 1.常量:是指在程序的执行过程中不变的量.如:1,2,3,4,……,true.false 也有一些包含在模块中的用符号表示的常量,常用的如math模块中的pi和e,如: > ...

  4. python 列表,元组,字符串方法和属性

    python序列包含列表[].元组().字符串三种 -------列表-------------- 一.列表基本内容 1.建立:a=[1,2,3,5],通过[ , ,], >>>b= ...

  5. requireJS目录

    前言 对于像我这种requireJS初学者而言,requireJS最难理解的部分应该是它的路径问题.晚上随便折腾了一下,算是稍微理清了这个目录问题吧. requireJS学习网址:requireJS中 ...

  6. 【SpringMVC学习02】走进SpringMVC的世界

    上一篇博文主要介绍了springmvc的整个架构执行流程,对springmvc有了宏观上的把握,这一篇博文主要以案例作为驱动,带你走进springmvc的世界.案例中的需求很简单:对商品列表的查询.表 ...

  7. linux下 目录(扩容)挂载磁盘

    1.常用命令 查看硬盘的分区 #sudo fdisk -l 查看IDE硬盘信息 #sudo hdparm -i /dev/hda 查看STAT硬盘信息 #sudo hdparm -I /dev/sda ...

  8. 恩布企业 IM iOS端 1.1 公布, 开源手机 IM

    恩布企业IM的 iOS 苹果开源手机client EntboostChat 公布 1.1 开发版本号.开源企业IM.企业即时通讯软件: 主要更新内容: 录界面添加自己定义LOGO显示 持部门.群组.联 ...

  9. sapjco3 开发与部署环境设置

    windows 环境设置 1.sapjco3.dll 需要与 sapjco3.jar 在同一目录 2.设置系统环境变量,将sapjco3所在目录加入系统环境变量 3.根据自己的操作系统版本选择对应的s ...

  10. 李洪强经典面试题52-Block

    李洪强经典面试题52-Block   Block Block底层原理实现 首先我们来看四个函数 void test1() { int a = 10; void (^block)() = ^{ NSLo ...