解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js

Posted 2022-12-28 wrhbk

1 为什么会发生延迟300毫秒的问题

   移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。这个问题在较新的安卓机上已经没有了，但是在ios一样恶心的存在。为什么不用touchend？举个一个例子 当存在一个滑动列表，而列表中的元素又可以点击的时候，你就知道有多爽了.

言归正传，其实fastclick的使用很简单，都是创建fastclick实列后，将其包裹目标dom。然后目标dom及dom内的元素就都会处理click事件，这一步具体原理可以有兴趣的同学可以点击这个链接去了解，在此就不多讲，下面举例，几种fastclick的使用

vue

  1.下载fastclick

 

npm install fastclick

 

  2.在main.js上引入fastclick

 

//main.js
import fastclick from ‘fastclick‘
fastclick.attach(document.body)

react

 1.下载fastclick

npm install --save-dev react-fastclick-alt

2.将元素或者component放在  <FastClick>...</FastClick> 中

import React from ‘react‘;
import FastClick from ‘react-fastclick-alt‘;
import ReactDOM from ‘react-dom‘;
ReactDOM.render(<FastClick><MyApp/></FastClick>, document.getElementById(‘app‘));

html

1.下载好之后直接引入

<script type=‘application/javascript‘ src=‘/path/to/fastclick.js‘></script>

2.在dom初始化后使用

if (‘addEventListener‘ in document) 
    document.addEventListener(‘DOMContentLoaded‘, function() 
        FastClick.attach(document.body);
    , false);

 

如果在使用fastclick 的同时，我有使了一些插件，在这个插件又依赖与元素的默认事件如clipboard.js那么我们该如何去处理呢？

可以使用这个 needsclick 在元素上使用这个类 可以使元素不使用fastclick来处理单击事件

<a class="needsclick">Ignored by FastClick</a>