FastClick是一個非常方便的庫,在移動瀏覽器上發(fā)生介于輕敲及點擊之間的指令時鼎姊,能夠讓你擺脫300毫秒的延遲。FastClick可以讓你的應(yīng)用程序更加靈敏迅捷。支持各種移動瀏覽器笆呆,比如Safari、Chrome粱挡、Opera等赠幕。
延遲為什么存在?
根據(jù)谷歌說法:
在移動瀏覽器中询筏,當(dāng)你點擊按鈕的單擊事件時容贝,將會等待大約300ms的時間拧揽。這是因為飞主,瀏覽器是等著看誉察,如果你是真正執(zhí)行雙擊。
兼容性
FastClick 能夠完美的兼容一下瀏覽器版本:
- Mobile Safari on iOS 3 and upwards
- Chrome on iOS 5 and upwards
- Chrome on Android (ICS)
- Opera Mobile 11.5 and upwards
- Android Browser since Android 2
- PlayBook OS 1 and upwards
什么時候不使用他
fastclick不附加任何監(jiān)聽器在桌面瀏覽器上面踱讨,所以如果你的項目不是針對的移動瀏覽器康二,那么就不要使用這個插件。
Android 設(shè)備上的 google瀏覽器 (Chrome) 32+ 版本勇蝙,在meta頭信息中設(shè)置 width=device-width 沒有300毫秒的延時沫勿,所以也無需使用本插件。
<meta name="viewport" content="width=device-width, initial-scale=1">
Chrome瀏覽器在安卓設(shè)備上的時候味混,設(shè)置meta頭信息中 user-scalable=no 但是這樣就無法讓用戶多點觸控縮放網(wǎng)頁了产雹。
對于IE11 + 你可以設(shè)置touch-action: manipulation
; 來禁用通過雙擊放大某些元素例如:鏈接和按鈕的,對于IE10使用 -ms-touch-action: manipulation
翁锡。
使用方法
1蔓挖、引入插件的javascript文件到你的HTML網(wǎng)頁中,像這樣:
<script type='application/javascript' src='/path/to/fastclick.js'></script>
注意:type屬性在HTML5網(wǎng)頁中可以省略不寫馆衔。
腳本必須加載到實例化fastclick在頁面的任何元素之前瘟判。
實例化 fastclick 最好在body元素的前面,這是使用推薦的方法:
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false);}
或者你使用了jquery插件角溃,你可以這樣編寫:
$(function() { FastClick.attach(document.body);});
如果你使用的browserify CommonJS的模塊系統(tǒng)或另一種風(fēng)格拷获,其fastclick.attach
函數(shù)將返回 require('fastclick').
作為一個結(jié)果,使用fastclick這些裝載機的最簡單的方法如下:
var attachFastClick = require('fastclick');attachFastClick(document.body);
壓縮版本的fastclick
運行make
建立一個縮小版的fastclick關(guān)閉其他API使用編譯器减细〈夜希縮小的文件保存到build/fastclick.min.js
或者你可以下載一個預(yù)先縮小版。
Note: the pre-minified version is built using our build service which exposes theFastClick
object throughOrigami.fastclick
and will have the Browserify/CommonJS API (see above).
var attachFastClick = Origami.fastclick;attachFastClick(document.body);
本文連接http://www.uedsc.com/fastclick.html