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. spring自己主动装配Bean属性

    spring提供了3种类型的自己主动装配 byName:把与Bean的属性具有同样名字(或者ID)的其它Bean自己主动装配到Bean的相应属性中. byType:把与Bean的属性具有同样类型的其它 ...

  2. SVN学习(三)——在Eclipse 中安装和使用SVN客户端插件

    0 基本概念了解 0.1 SVN的工作原理:采取客户端/服务器模式——在服务器的版本库中保存项目文件的各个版本,所有参与协同开发的程序员在自己本地电脑上保存一个工作副本.SVN支持程序员将本地副本更新 ...

  3. 当执行sql更新失误,添加了错误的判断条件,导致数据表数据出错时,如何利用备份数据库实现联合更新还原数据。

    首先得有备份数据库,没有备份肯定无法联合更新回复. 我错误更新了 [SBSDB].[dbo].[wallet_user_info]中的用户名user_name 我的备份数据库及对应数据表SBSDBTe ...

  4. rabbitMQ 基本概念

    RabbitMQ 整体上是一个生产者与消费者模型,主要负责接收.存储和转发消息.可以把消 息传递的过程想象成:当你将一个包裹送到邮局,邮局会暂存并最终将邮件通过邮递员送到收件人的手上, RabbitM ...

  5. JavaScript的特殊函数

    1.匿名函数 onclick=function(){}就是匿名函数. 2.匿名函数的回调函数 <script> <span style="white-space:pre&q ...

  6. table行编辑

    一个简单的Demo <html> <head> <title>Table Test Demo</title> <style> .view_t ...

  7. nodejs 命令行交互

    人机交互 function readSyncByfs(tips) { tips = tips || '> '; process.stdout.write(tips); process.stdin ...

  8. Redis之Set命令

    0.前言 redis对无序集合的操作几个命令,本文介绍几个命令实际操作过程. 1.sadd命令 2.求差集和求并集命令 3.求交集命令 1.sadd命令 void saddCommand(redisC ...

  9. Aurora学习笔记连载一:仿真平台搭建

    由于公司项目需要,需要学习Aurora协议,才有了这样的连载学习笔记,也算是对自己学习的一份记录吧. 对于Aurora是什么,大家自行百度. 当然,Kevin也在此先提醒大家,本套学习笔记不是你想学就 ...

  10. Delphi7 Just In Time debugger 与VS冲突

    这是设定系统当前调试器的,你可以在注册表中自己设置一下,位置是:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\AeDe ...