原理

在检测到touchend事件后, 会通过dom自定义事件模拟一个click事件,并把浏览器300ms之后真正触发的点击事件屏蔽掉,fastclick是不会对PC浏览器添加监听事件

使用

1、引入fastclick.js

2、给body所有的元素绑定click事件,之后我们使用的就是fastclick中的click事件(像正常使用click事件一样)

情况一:使用jquery

// js引入
<script type='application/javascript' src='/path/to/fastclick.js'></script>

$(function() {
FastClick.attach(document.body);
});

情况二:没用jquery

// js引入
<script type='application/javascript' src='/path/to/fastclick.js'></script>
if ('addEventListener' in document) {
   document.addEventListener('DOMContentLoaded', function() {
  FastClick.attach(document.body);
   }, false);
}

情况三:AMD

var FastClick = require('fastclick');
FastClick.attach(document.body, options);

例如:在vue中使用

// 安装  
npm install fastclick -S  
// 引入  
import FastClick from 'fastclick'  
// 使用  
FastClick.attach(document.body);

参考

fastclick

fastclick插件学习(一)之用法的更多相关文章

  1. Qt 插件学习(一)

    插件是什么 注意:这儿暂时不考虑静态插件(潜意识中总觉得它根本就不算插件). 插件是一个动态库(共享库).动态库是一个独立的文件中的独立模块,可被多个程序访问. 先看动态库的两种用法 1. 程序链接时 ...

  2. uexQQ插件学习心得

    uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...

  3. emmet插件学习,练习中遇到一些问题

    emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...

  4. bootstrap插件学习

    转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button& ...

  5. Object C学习笔记22-#define 用法

    上一篇讲到了typedef 关键字的使用,可以参考文章 Object C 学习笔记--typedef用法 .而在c中还有另外一个很重要的关键字#define. 一. #define 简介 在C中利用预 ...

  6. Java EE学习--Quartz基本用法

    新浪博客完全不适合写技术类文章.本来是想找一个技术性的博客发发自己最近学的东西,发现博客园起源于咱江苏,一个非常质朴的网站,行,咱要养成好习惯,以后没事多总结总结经验吧.很多时候都在网上搜索别人的总结 ...

  7. fastclick插件 导致 input[type="date"] 无法触发问题解决方案

    鄙人才疏学浅,新人一枚,不足之处还请谅解,写下这个也只是为了给大家分享一下我解决这个BUG的方法,也是自己的一个笔记. 首先,我们使用fastclick插件的初衷是解决“tap”事件“点透”的BUG: ...

  8. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  9. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

随机推荐

  1. golang list使用 双层 循环 删除 遍历

    queue队列: import ( "container/list" "sync" ) type Queue struct { l *list.List m s ...

  2. maven在整合springmvc+hibernate运行时遇到的一些问题

    在这里大概记录一下自己在搭建的时候遇到的一些小问题. 1,在获取hibernate的sessionFactory对象时报空指针异常,我的常规配置如下:

  3. .NET笔记题库(一)

    1 (1)面向对象的语言具有__继承性_性._封装性_性._多态性 性. (2)能用foreach遍历访问的对象需要实现 _ IEnumerable 接口或声明_ GetEnumerator 方法的类 ...

  4. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_15-webpack研究-webpack-dev-server-程序调试

    webpack把我们的js文件都打包了.所以不能用chrome的调试工具. 打包生成的js文件比较乱无法跟踪. 配置好了以后就可以让浏览器查看到打包后的源代码 在源代码这里加一个debuuger 这里 ...

  5. Python3 继承

    继承的好处:子类实现父类的全部功能 1.单继承 若父类和子类有共同的方法或属性,则子类对父类方法或属性进行覆盖 class ClassA: def __init__(self): self.a = ' ...

  6. Java NIO学习笔记 三 散点/收集 和频道转换

    Java NIO散点/收集 Java NIO带有内置的分散/收集支持.散点/收集是读取和写入渠道过程中使用的概念. 从通道散射读取是将数据读入多个缓冲区的读取操作.因此,数据可以从通道“散布”到多个缓 ...

  7. 不能在jsp页面<c:choose>对标签中使用<!---->进行注释

    jsp页面<c:choose>标签中使用<!---->进行注释,访问出现异常,如下: 标签范围:

  8. UIApearance的认识

    在参加工作之前一直不知道还有UIApearance的这个属性,并且不知道UIApearance是用来干嘛的,还不知道怎么用,工作之后,看公司代码中都会出现这个UIApearance,我决定学习学习,并 ...

  9. java 注解@interface

    类注解: package com.cglibs; import java.lang.annotation.ElementType; import java.lang.annotation.Retent ...

  10. Flutter Window环境运行(VSCode + 单独运行Android 虚拟机)

    官网以及很多网上文章的开发都是基于Android ,因为它能创建不同类型移动设备虚拟机.但个人始终觉得它太庞大,启动慢耗资源,但我们使用Flutter又离不开虚拟机. 经过实践,现在能成功的单独启动移 ...