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.
Tetapi ujian sebenar mendapati acara klik lebih pantas daripada acara ketik.
Kelewatan klik dan ketik yang mencetuskan hanya kira-kira 100ms
<!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>//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 1494338414084Apabila 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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Gunakan ketik atau perkenalkan fastclick.js
Adalah disyorkan untuk memetik
fastclick.js,可以解决clickAcara akan mempunyai kelewatan selama 300 milisaatTapak web rasmi https://github.com/ftlabs/fas...
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.
Kenapa tidak pertimbangkan touchstart
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 ->