国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端點擊延遲問題研究

馬忠志 / 1174人閱讀

摘要：為了判斷用戶是否是進行雙擊操作。因為移動端雙擊是放大文字的手勢操作。可以讓特定的元素或者整個文檔中的元素移除點擊延遲的問題，同時不會影響通過事件代替事件。對于交互相對復(fù)雜的移動端頁面或應(yīng)用是一個相對不錯的解決方案。

移動端點擊延遲問題研究 測試 html
javascript 
// 通過是否調(diào)用 fastclick 這個庫來屏蔽點擊延遲來查看是否存在點擊延遲的問題
// FastClick.attach(document.body);

var touchEndTime;
var clickTime;
var clickDelay;

function now() {
    return new Date().getTime();
}

$("#btn").on("click", function() {
    clickTime = now();
    clickDelay = clickTime - touchEndTime;
    alert(clickDelay);
});

$("#btn").on("touchEnd", function() {
    touchEndTime = now();
});
這個頁面包含 meta 標簽：
測試結(jié)果

測試環(huán)境：iPhone6s微信內(nèi)置瀏覽器
未使用 fastclick：測試結(jié)果延遲在 350 ～ 370 之間

使用 fastclick: 測試結(jié)果在 0 ～ 5 之間

測試環(huán)境：iPhone6s貝貝客戶端v4.9.05

未使用 fastclick: 測試結(jié)果在 5 ~ 20 之間

使用 fastclick：測試結(jié)果在 0 ~ 5 之間

什么是點擊延遲

現(xiàn)在我們來看看什么是點擊延遲？點擊延遲是指移動端瀏覽器在 touchend 和 click 之間存在 300ms ～ 350ms 的延遲。為了判斷用戶是否是進行雙擊操作。因為移動端雙擊是放大文字的手勢操作。

解決方案

對于chrome和firefox，可以通過禁用伸縮，即在 head 上的 meta 標簽添加 user-scalable = no。如下：

chrome32+ 可以將 viewport 的寬度設(shè)置成 device-width.

IE10+，可以使用 pointerEvents。可以讓特定的元素或者整個文檔中的元素移除點擊延遲的問題，同時不會影響 pinch-zooming

a, button, .myelements
{
-ms-touch-action: manipulation;    /* IE10  */
touch-action: manipulation;        /* IE11+ */
}

通過 touchend 事件代替 click 事件。

使用 zepto.js 的 tap 事件，通過 singleTap 和 doubleTap 來區(qū)分單擊和雙擊。但是會出現(xiàn)點擊穿透，而且對于已經(jīng)使用 click 的文件，改動成本太大。

終極大 boss。 fastclick。上面的幾種方法都是針對某些瀏覽器，或者某些瀏覽器的某些版本，或者會影響到我們平常使用方式的解決方案。使用起來不方便且考慮的細節(jié)很多，實踐難度比較大。fastclick 作為一個終極的解決方案，使用方便，文件大小壓縮后只有 3.3k。對于交互相對復(fù)雜的移動端web頁面或應(yīng)用是一個相對不錯的解決方案。

    javascript:
    if ("addEventListener" in document) {
        document.addEventListener("DOMContentLoaded", function() {
            FastClick.attach(document.body);
        }, false);
    }
    jQuery:
    $(function() {
        FastClick.attach(document.body);
    });
    CommonJS:
    var attachFastClick = require("fastclick");
    attachFastClick(document.body);
    AMD:
    var FastClick = require("fastclick");
    FastClick.attach(document.body, options);

參考：

5-ways-prevent-300ms-click-delay-mobile-devices

pointerevents

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91202.html

相關(guān)文章

  • 移動前端 - 收藏集 - 掘金

    摘要：使用移動設(shè)備查看頁面時會發(fā)現(xiàn)，在微信瀏覽器中有頂部導(dǎo)航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面 做過網(wǎng)頁開發(fā)的同學(xué)想必都遇到過這樣尷尬的排版問題：在主體內(nèi)容不足夠多或者未完全加載出來之前，就會導(dǎo)致出現(xiàn)（圖一）的這種情況，原因是因為...

    Jochen 評論0 收藏0

  • web前端 —— 移動端知識的一些總結(jié)

    摘要：打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦，比較缺人，機會多多廣告位長期有效，有興趣簡歷我郵箱個人在移動端的一些總結(jié)歸納，有新的知識點會一直更新一部分用做動畫時，變形盡量通過來實現(xiàn)，而不是用，等屬性。不過的事件有一個事件穿透的問題。 打個招聘廣告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：854936875@q...

    Astrian 評論0 收藏0

  • web前端 —— 移動端知識的一些總結(jié)

    摘要：打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦，比較缺人，機會多多廣告位長期有效，有興趣簡歷我郵箱個人在移動端的一些總結(jié)歸納，有新的知識點會一直更新一部分用做動畫時，變形盡量通過來實現(xiàn)，而不是用，等屬性。不過的事件有一個事件穿透的問題。 打個招聘廣告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：854936875@q...

    BetaRabbit 評論0 收藏0

  • 移動端點擊事件全攻略，這里的坑你知多少？

    摘要：所以這種情況下是不符合點擊事件的定義的。，關(guān)于移動端的點擊事件總結(jié)完了，可能你都沒想到一個簡單的點擊事件會有那么多坑，如果你在工作中可能會涉及到移動端開發(fā)的話，相信這篇文章還是值得你點贊和收藏的，畢竟是踩了那么多坑的經(jīng)驗總結(jié)。 看標題的時候你可能會想，點擊事件有什么好說的，還寫一篇攻略？哈哈，如果你這么想，只能說明你too young to simple. 接觸過移動端開發(fā)的同學(xué)可能都...

    Nosee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<