fastclick.js---解決移動(dòng)端點(diǎn)擊事件300ms延時(shí)-創(chuàng)新互聯(lián)

Fast Click 是一個(gè)簡單、易用的庫，專為消除移動(dòng)端瀏覽器從物理觸摸到觸發(fā)點(diǎn)擊事件之間的300ms延時(shí)。

創(chuàng)新互聯(lián)是一家專業(yè)提供鐘山企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為鐘山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

為什么會(huì)存在延遲呢？

從你觸摸按鈕到觸發(fā)點(diǎn)擊事件，移動(dòng)端瀏覽器會(huì)等待接近300ms，原因是瀏覽器會(huì)等待以確定你是否執(zhí)行雙擊事件

兼容性

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

何時(shí)不需要使用

1、FastClick 不會(huì)伴隨監(jiān)聽任何桌面瀏覽器

2、Android 系統(tǒng)中，在頭部 meta 中設(shè)置 width=device-width 的Chrome32+ 瀏覽器不存在300ms 延時(shí)，所以，也不需要

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

3、同樣的情況也適用于 Android設(shè)備（任何版本），在viewport 中設(shè)置 user-scalable=no，但這樣就禁止縮放網(wǎng)頁了

4、IE11+ 瀏覽器中，你可以使用 touch-action: manipulation; 禁止通過雙擊來放大一些元素（比如：鏈接和按鈕）。IE10可以使用 -ms-touch-action: manipulation

使用方法

在 HTML 頁面中引入 fastclick.js

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

script 文件必須在頁面元素實(shí)例化 FastClick 之前加載

在 body 上實(shí)例化 FastClick ，推薦按照如下方法使用：

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

如果你使用的是 jQuery

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

如果你使用的是 Browserify 或其他 CommonJS 風(fēng)格的模塊系統(tǒng)，F(xiàn)astClick.attach 方法會(huì)在你調(diào)用 require('fastclick') 之后返回。所以，使用 FastClick 最簡單的方法如下：

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

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        a{
            text-decoration: none;
            color:black;
        }
    </style>
</head>
<body>
<a href="#">鏈接</a>

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
    $('a').click(function(e){
        e.preventDefault();
        $(this).css('color','red');
    });


</script>
</body>
</html>

通過手機(jī)來運(yùn)行這段代碼，使用FastCick事件，可以很明顯看到，點(diǎn)擊鏈接文字變紅時(shí)沒有了閃爍效果

Github地址：https://github.com/ftlabs/fastclick

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標(biāo)題：fastclick.js---解決移動(dòng)端點(diǎn)擊事件300ms延時(shí)-創(chuàng)新互聯(lián)
本文路徑：http://www.rwnh.cn/article0/ccejoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

fastclick.js---解決移動(dòng)端點(diǎn)擊事件300ms延時(shí)-創(chuàng)新互聯(lián)