cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Bolehkah ketik menyelesaikan masalah kelewatan klik sebanyak 300ms?

klik&ketik

Kaedah penulisan yang paling disyorkan pada terminal mudah alih ialah menggunakan acara ketik zepto dan bukannya klik Sebabnya secara amnya acara klik mempunyai kelewatan 300ms yang legenda.

Hasil ujian

Tetapi ujian sebenar mendapati acara klik lebih pantas daripada acara ketik.

Kelewatan klik dan ketik yang mencetuskan hanya kira-kira 100ms

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>click&tap</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        h3 {
            text-align: center;
            line-height: 50px;
            border-bottom: 1px solid #c7c7c7;
        }
    </style>
</head>
<body>
<h3 id="h3">click me</h3>
</body>
<script type="text/javascript" src="../../common/zepto.js"></script>
<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>
</html>

keluaran

//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

Soalan berkaitan

Apabila terminal mudah alih menggunakan acara ketuk zepto, ia akan menjadi agak telus.

Alasannya secara amnya: DOM induk (biasanya lapisan topeng) ditutup atau disembunyikan dalam acara ketik, dan DOM kanak-kanak kebetulan juga mempunyai acara klik, yang menyebabkan DOM kanak-kanak gagal disebabkan mekanisme aliran peristiwa ( menangkap menggelegak) Peristiwa klik juga dicetuskan.

Analisis: Jika kesemuanya berada dalam peringkat menggelegak (peringkat menggelegak lalai apabila peristiwa dicetuskan), induk pasti akan dicetuskan selepas subset, dan seharusnya tiada fenomena titik lalu.

Sesetengah artikel blog mengatakan bahawa ibu bapa menggunakan ketik dan subset menggunakan klik. Melihat pada masa pencetus dalam demo, ini tidak mungkin berlaku.

Sebab utamanya ialah akan ada beberapa orang bodoh yang menggunakan klik dan ketik pada masa yang sama dalam logik perniagaan yang sama?

Jadi pada asasnya ia merasakan fasa tangkapan digunakan terutamanya untuk mencetuskan peristiwa pada masa yang sama. Tetapi terdapat juga masalah mekanisme acara Zepto adalah berdasarkan peristiwa menggelegak, dan acara dalam touch.js terikat pada dokumen.

给我你的怀抱给我你的怀抱2774 hari yang lalu647

membalas semua(5)saya akan balas

  • 天蓬老师

    天蓬老师2017-05-19 10:15:16

    Gunakan ketik atau perkenalkan fastclick.js

    balas
    0
  • 阿神

    阿神2017-05-19 10:15:16

    Adalah disyorkan untuk memetikfastclick.js,可以解决clickAcara akan mempunyai kelewatan selama 300 milisaat
    Tapak web rasmi https://github.com/ftlabs/fas...

    balas
    0
  • 天蓬老师

    天蓬老师2017-05-19 10:15:16

    Acara ketik zepto hanyalah simulasi, dan kecekapannya adalah sederhana, ia tidak sepantas tindak balas klik asli. Jika ia adalah keperluan yang agak mudah (contohnya, anda hanya perlu membalas acara "klik"), anda boleh mempertimbangkan untuk menggunakan fastclick Kelebihannya ialah pemprosesan acara klik asal tidak perlu diubah dan ia boleh disesuaikan ke terminal PC dan mudah alih. Tetapi jika ia hanya keperluan mudah alih, maka hanya gunakan acara permulaan sentuh asli.

    Penyelesaian lain ialah dengan terus menggunakan perpustakaan gerak isyarat, seperti Hammerjs atau Tencent's AlloyFinger, yang sesuai untuk senario dengan keperluan gerak isyarat yang lebih kompleks.

    balas
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:15:16

    Kenapa tidak pertimbangkan touchstart

    balas
    0
  • 黄舟

    黄舟2017-05-19 10:15:16

    Betulkan sebab acara klik anda Ia bukan kerana mekanisme menggelegak, tetapi kerana kelewatan acara klik.

    • Sebagai contoh, apabila anda mengklik butang tutup, hujung sentuh mencetuskan ketik dahulu dan lapisan pop timbul serta topeng disembunyikan. Selepas tamat sentuh, teruskan menunggu selama 300ms dan mendapati tiada gelagat lain, kemudian teruskan mencetuskan klik Memandangkan lapisan pop timbul telah hilang pada masa ini, sasaran acara klik semasa adalah pada elemen asas, jadi. kandungan acara asas dicetuskan. Keseluruhan proses mencetuskan acara ialah hujung sentuh ->

    balas
    0
  • Batalbalas