react、vue - 解决移动端点击事件300毫秒延迟问题（fastclick.js）

  从点击屏幕上的元素到触发元素的点击（click）事件的过程中，移动端浏览器大约有300毫秒的等待时间，主要是想看后面是否还会再做点击操作（是否要进行双击操作）,而fastclick.js就是为了解决这个问题。下面我来说一下使用方法：

1、fastclick在react上的使用方式：

（1）安装：

npm install --save fastclick

（2）使用：（写在全局的index.js文件中，直接作用于整个项目）

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

// 引入 fastclick
import fastclick from 'fastclick';

// 解决点击事件延迟300毫秒的问题
fastclick.attach(document.body); 

ReactDOM.render(<App />,document.getElementById('root'));

2、fastclick在vue上的使用方式：

（1）安装：

npm install --save fastclick

（2）使用：（写在全局的main.js文件中，直接作用于整个项目）

import Vue from 'vue';
import App from './App';
import router from './router';
import Axios from 'axios';

// 引入 fastclick
import fastclick from 'fastclick';

// 解决点击事件延迟300毫秒的问题
fastclick.attach(document.body); 

new Vue({
    el: '#app',
    router,
    Axios,
    store,
    components: {App},
    template: '<App/>'
});

中上述，在vue中的使用方式和在react中的使用方式是一样的。

3、fastclick在js上的使用方式：

（1）在HTML页面中添加

<script type='application/javascript' src='./js/fastclick.js'></script>

注意：要在引入其他（脚本）文件之前引入fastclick.js文件

（2） 在JS中使用fastclick的做法：

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}

（3） 在JQ中使用fastclick的做法：

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