首頁常見問題正文

移動(dòng)端常用插件:Fastclick插件的使用

更新時(shí)間:2022-12-20 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  在之前的講解中,我們使用移動(dòng)端內(nèi)置的touch事件模擬了單擊效果和輪播圖切換效果。今天筆者將會(huì)介紹一下如何使用移動(dòng)端第三方插件庫,用簡(jiǎn)潔的代碼實(shí)現(xiàn)移動(dòng)端特效。

  Fastclick插件是由FTLabs開發(fā)的JavaScript庫,它簡(jiǎn)單易用,上手比較快,解決了click事件在移動(dòng)端觸發(fā)時(shí)有大約300ms延時(shí)的問題。另外,F(xiàn)astclick在PC端也能響應(yīng)并解決了延時(shí)問題,這極大提高了用戶瀏覽體驗(yàn)的效果,使操作更加靈敏。

  1.引入方式

  通過官網(wǎng)下載fastclick.js至本地,然后在HTML網(wǎng)頁中使用script標(biāo)簽引入fastclick.js文件即可,引入方式如下。

<script src="fastclick.js"></script>

  2.初始化

  通過JavaScript方式對(duì)Fastclick進(jìn)行實(shí)例化,示例代碼如下。

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

  上述代碼中,F(xiàn)astClick.attach

方法的參數(shù)可以是任意的DOM元素,在這里使用document.body表示會(huì)將document.body下面的所有元素都綁定為Fastclick。

  此外,還可通過jQuery方式對(duì)Fastclick進(jìn)行實(shí)例化,示例代碼如下。

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


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!