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);
});

最后

以上就是微笑凉面为你收集整理的react、vue - 解决移动端点击事件300毫秒延迟问题（fastclick.js）的全部内容，希望文章能够帮你解决react、vue - 解决移动端点击事件300毫秒延迟问题（fastclick.js）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。