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. MySQL存储过程详解 mysql 存储过程(转)

    mysql存储过程详解 1.      存储过程简介   我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的S ...

  2. leetcode 解题报告 Word Ladder II

    题目不多说了.见https://oj.leetcode.com/problems/word-ladder-ii/ 这一题我反复修改了两天半.尝试过各种思路,总是报TLE.终于知道这一题为什么是leet ...

  3. 使用LoadRunner监控Apache的步骤 (转)

    一.Apache上的设置 打开<Apache Installation>/conf/httpd.conf,进行如下修改: 1.  设置允许查看Apache运行状态的主机 # # Allow ...

  4. 【Android进阶】怎样使用文件来保存程序中的数据

    在程序中.有非常多保存和获取数据的方法,本篇文章,主要介绍使用文件系统对程序中的数据进行保存和读取的操作 我直接写了一个帮助类,进行文件的写入和读取操作 /** * 用于在文件里保存程序数据 * * ...

  5. mvc5整合Autofac

    本文中将使用 mvc5与webapi2进行对Autofac整合 准备工作: 1.vs2013 or vs2013+ 2.网络良好,nuget正常访问 好了需要的准备工作就这么多. ---------- ...

  6. Linux内核设计基础(五)之内存管理

    我感觉学习操作系统首先要从内存分配和管理入手. 首先我们应该知道现代操作系统是以页为单位进行内存管理的,32位体系结构支持4KB的页.而64位体系结构支持8KB的页.页是用来分配的.怎样才干进行高效和 ...

  7. unity, 内存profile,ImageEffects Temp和Unity GI SystemTex RGBM

    最近用unity的Profiler对公司项目进行内存profile,发现一些问题,记录一下. 用Memory Area的Detailed View,用法见:http://docs.unity3d.co ...

  8. Closure闭包示例

    var foo = function(){ var cnt = 0; return function(){ return cnt++; }; }; var closure = foo(); conso ...

  9. Angularjs学习笔记6_table1

    <!DOCTYPE html><html lang="en" ng-app="plunker"><head>    < ...

  10. JAVA 双重检查锁定和延迟初始化

    双重检查锁定的由来在Java程序中,有时需要推迟一些高开销的对象的初始化操作,并且只有在真正使用到这个对象的时候,才进行初始化,此时,就需要延迟初始化技术.延迟初始化的正确实现是需要一些技巧的,否则容 ...