成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端點(diǎn)擊延遲問題研究

馬忠志 / 1182人閱讀

摘要：為了判斷用戶是否是進(jìn)行雙擊操作。因?yàn)橐苿?dòng)端雙擊是放大文字的手勢操作?？梢宰屘囟ǖ脑鼗蛘哒麄€(gè)文檔中的元素移除點(diǎn)擊延遲的問題，同時(shí)不會影響通過事件代替事件。對于交互相對復(fù)雜的移動(dòng)端頁面或應(yīng)用是一個(gè)相對不錯(cuò)的解決方案。

移動(dòng)端點(diǎn)擊延遲問題研究 測試 html
javascript 
// 通過是否調(diào)用 fastclick 這個(gè)庫來屏蔽點(diǎn)擊延遲來查看是否存在點(diǎn)擊延遲的問題
// 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();
});
這個(gè)頁面包含 meta 標(biāo)簽：
測試結(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 之間

什么是點(diǎn)擊延遲

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

解決方案

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

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

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

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

通過 touchend 事件代替 click 事件。

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

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

    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://systransis.cn/yun/91202.html

相關(guān)文章

  • 移動(dòng)前端 - 收藏集 - 掘金

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

    Jochen 評論0 收藏0

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

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

    Astrian 評論0 收藏0

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

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

    BetaRabbit 評論0 收藏0

  • 移動(dòng)端點(diǎn)擊事件全攻略，這里的坑你知多少？

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

    Nosee 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<