click事件傳說中的300ms延遲

click&tap

移動端你們比較推薦的寫法都是採用zepto的tap事件代替click,理由通常是click事件有傳說中的300ms延遲。

測試結果

移動端啓用 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

測試發現click事件還比tap事件相應快一些。

click 和 tap 觸發延遲只有100ms左右

不啓用 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

測試發現click事件還比tap事慢200ms 左右。

tap 和 touchend 觸發延遲相對touchstart有100ms左右。[這個啓不啓用縮放都同樣]。

demo

//zepto 是1.2的
<script type="text/javascript" src="../../common/zepto.js"></script>
//touch.js 是github上拉取的最新的
<script type="text/javascript" src="../../common/touch.js"></script>
<script type="text/javascript">
    // click 事件延遲問題
    document.getElementById('h3').addEventListener('click', function (e) {
        console.log("=========click1======")
        console.log(new Date().getTime());
    });

    $("#h3").on('tap', function (e) {
        console.log("=========zepto tap1======")
        console.log(new Date().getTime());
    });

    document.getElementById('h3').addEventListener('click', function (e) {
        console.log("=========click2======")
        console.log(new Date().getTime());
    });

    $("#h3").on('tap', function (e) {
        console.log("=========zepto tap2======")
        console.log(new Date().getTime());
    });

    document.getElementById('h3').addEventListener('touchend', function (e) {
        console.log("=========touchend======")
        console.log(new Date().getTime());
    });

    document.getElementById('h3').addEventListener('touchstart', function (e) {
        console.log("=========touchstart======")
        console.log(new Date().getTime());
    });
   
</script>

output

//output [啓用移動端禁用縮放功能]
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:56 =========touchstart======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:57 1494338413993
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:51 =========touchend======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:52 1494338414081
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:31 =========click1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:32 1494338414082
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:41 =========click2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:42 1494338414083
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:36 =========zepto tap1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:37 1494338414084
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:46 =========zepto tap2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:47 1494338414084

//output [不啓用移動端禁用縮放功能]
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:56 =========touchstart======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:57 1494341055611
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:51 =========touchend======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:52 1494341055710
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:36 =========zepto tap1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:37 1494341055712
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:46 =========zepto tap2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:47 1494341055713
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:31 =========click1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:32 1494341055911
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:41 =========click2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:42 1494341055911

相關問題

移動端採用zepto的tap事件時會有點透的現象。

緣由通常是：在tap事件中關閉或者隱藏了父級（通常狀況下是遮罩層）的dom,而子dom剛好也存在點擊事件，這樣因爲事件流機制（捕獲冒泡）致使子級dom也觸發了點擊事件。

分析：都在冒泡階段（事件觸發默認冒泡階段）的話，父級確定比子集後觸發，應該不會產生點透現象。

有些博客文章說父級使用tap,子集使用click。看demo中的觸發時間也只有在不啓用縮放時會發生這種狀況。

主要是會有那個傻逼在一個業務邏輯中同時使用click和tap呢？

因此基本上感受主要是同時使用捕獲階段觸發事件。可是這樣也有一個問題，zepto的事件機制是基於事件冒泡，touch.js中事件都是綁定在document上的。