雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

移動端點擊FastClick用法 master

假裝紳士??1年前 (2018-09-08)1903去下載A+A-

?? ? 軟件著作權歸作者所有;本站所有軟件均來源于網絡,僅供學習使用,請支持正版!

為什么要使用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

資源下載

恭喜,此資源為免費資源,請先

文件版本:master

文件大小:<1M

文件語言:jquery插件

更新日期:2018-9-8

技術交流:QQ群 7717114

全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖