fastclick插件学习之用法

Posted 2020-11-23 kunmomo

原理

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

使用

1、引入fastclick.js

2、给body所有的元素绑定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