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. servlet--百度百科

    Servlet(Server Applet),全称Java Servlet, 未有中文译文.是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容.狭义的Servle ...

  2. 一个我用来上传代码到Github的 Shell 脚本

    因为用git老是要敲许多命令.所以写了个小脚本.代码如下: #! /bin/sh echo Going to simpleWebtest... cd ~/softwaredevelopment/wor ...

  3. 数据结构之---C语言实现最小生成树之prim(普里姆)算法

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  4. 一个好用的短连接服务,mark备用

    http://to.ly/api.php? longurl=http://www.example.com 当中http://www.example.com 是你所须要转换的长链接地址.经过一个简单的g ...

  5. python学习笔记之pdb调试

    之前一直说要学python可还是一直停留在看的层面,昨天大神手把书教我pdb调试,说要摆脱IDE集成开发环境编程,感激不尽,立一个flag,python一定要入门! 1.进入方式 1)windows ...

  6. git服务器gitlab之搭建和使用

    git服务器比较有名的是gitosis和gitolite,这两个管理和使用起来稍微有些复杂,没有web页面,而gitlab则是类似于github的一个工具,github无法免费建立私有仓库,并且为了代 ...

  7. Atitit.java 虚拟机的构成 与指令分类 与 指令集合 以及字节码查看工具javjap

    Atitit.java 虚拟机的构成 与指令分类 与 指令集合 以及字节码查看工具javjap 1.1. 虚拟机的构成 java虚拟机--处理器.堆栈.寄存器.指令系统. 1 1.2. 虚拟机执行过程 ...

  8. 2. Add Two Numbers【medium】

    2. Add Two Numbers[medium] You are given two non-empty linked lists representing two non-negative in ...

  9. 类matlab find函数

    逻辑矩阵,找出元素1并记录其位置索引. int main(int argc, char** argv) { unsigned ][] = { , , , , , , , , , , , , , , , ...

  10. web开发中经常使用的js

    将自己在web开发中经经常使用到的一些JS总结一下. 1.改动标签和表单的值 改动标签的值: var customer = document.getElementById("custm&qu ...