FastClick用法

為什么要使用FastClick

移動設備上的瀏覽器默認會在用戶點擊屏幕大約延遲300毫秒后才會觸發點擊事件，這是為了檢查用戶是否在做雙擊。為了能夠立即響應用戶的點擊事件，才有了FastClick。

項目地址：https://github.com/ftlabs/fastclick

FastClick的使用

安裝fastclick

安裝fastclick可以使用npm，Component和Bower。另外也提供了Ruby版的gem fastclick-rails以及.NET提供了NuGet package。最直接的可以在頁面引入fastclick js文件。如：

在頁面直接引入fastclick.js

 

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

使用npm安裝

 

npm install fastclick

初始化FastClick實例

初始化FastClick實例建議在頁面的DOM文檔加載完成后。

純Javascript版

 

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

jQuery版

 

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

類似Common JS的模塊系統方式

 

var attachFastClick = require('fastclick');
attachFastClick(document.body);

調用require('fastclick')會返回FastClick.attach函數。

使用needsclick過濾特定的元素

如果頁面上有一些特定的元素不需要使用fastclick來立刻觸發點擊事件，可以在元素的class上添加needsclick:

 

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

不需要使用fastclick的情況

以下這幾種情況是不需要使用fastclick：

1、FastClick是不會對PC瀏覽器添加監聽事件
2、Android版Chrome 32+瀏覽器，如果設置viewport meta的值為width=device-width，這種情況下瀏覽器會馬上出發點擊事件，不會延遲300毫秒。

 

<meta name="viewport" content="width=device-width, initial-scale=1">

3、所有版本的Android Chrome瀏覽器，如果設置viewport meta的值有user-scalable=no，瀏覽器也是會馬上出發點擊事件。
4、IE11+瀏覽器設置了css的屬性touch-action: manipulation，它會在某些標簽（a，button等）禁止雙擊事件，IE10的為-ms-touch-action: manipulation

參考：https://github.com/ftlabs/fastclick