首頁(yè)常見(jiàn)問(wèn)題正文

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

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

IT培訓(xùn)班

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

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

  1.引入方式

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

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

  2.初始化

  通過(guò)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。

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

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


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