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

淡淡的烟草味﹌ 2021-08-13 23:55 498阅读 0赞

从点击屏幕上的元素到触发元素的点击（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页面中添加

**注意：要在引入其他（脚本）文件之前引入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);
    });