解決在移動端上 click事件延遲300 毫秒的問題 fastclick.js

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>