Penjelasan mendetail tentang solusi pengguliran halaman aplikasi web yang macet

Saat browser seluler menggulir halaman saat ini (dan mungkin juga memperbesar halaman), perilaku default diblokir, menyebabkan halaman terpaksa tetap diam, mengakibatkan pengalaman pengguna yang buruk dan rasa jeda saat menggulir halaman.

Penjelasan yang lebih spesifik: Karena atribut yang dapat dibatalkan dari objek peristiwa touchstart adalah benar, artinya, perilaku defaultnya dapat dicegah oleh pendengar melalui metode preventDefault(). Namun browser tidak dapat mengetahui sebelumnya apakah pendengar akan memanggil preventDefault(). Yang bisa dilakukan hanyalah menunggu pendengar selesai mengeksekusi sebelum menjalankan perilaku default -menghabiskan. , yang akan menyebabkan halaman terhenti. Sekalipun pendengarnya adalah fungsi kosong, kelambatan tertentu akan terjadi, karena eksekusi fungsi kosong juga akan memakan waktu.

Konsep dasar: xxx.addEventListener('nama acara', fungsi(xxx){xxx}, useCapture).

Parameter pertama mewakili nama peristiwa (tidak termasuk, seperti klik); parameter kedua mewakili fungsi untuk menerima pemrosesan peristiwa;

Mari kita lihat apa maksud dari hal ini. Akan lebih intuitif untuk memberikan contoh secara langsung.

 <div id=level1> <div id=level2> <div id=level3>Silakan klik di sini</div> </div></div><div id=info></div> 

 var level1 = document.getElementById(level1);var level2 = document.getElementById(level2);var level3= document.getElementById(level3);var info = document.getElementById(info);outDiv.addEventListener(klik, function () { info.innerHTML += level1 + <br>; }, false);middleDiv.addEventListener(klik, fungsi () { info.innerHTML += level2 + <br> }, salah);inDiv.addEventListener(klik, fungsi () { info.innerHTML += level3 + <br>; }, salah);

Berdasarkan kode di atas, mari kita lihat efek useCapture sebagai benar dan salah:

Jika semuanya salah, urutan pemicunya adalah: level3, level2, level1

Jika semuanya benar, urutan pemicunya adalah: level1, level2, level3

Jika level1 benar dan yang lainnya salah, urutan pemicunya adalah: level1, level3, level2

Jika level2 benar dan yang lainnya salah, urutan pemicunya adalah: level2, level3, level1

Jika level3 benar dan yang lainnya salah, urutan pemicunya adalah: level3, level2, level1

Jika level1 salah dan yang lainnya benar, urutan pemicunya adalah: level2, level3, level1

Jika level2 salah dan yang lainnya benar, urutan pemicunya adalah: level1, level3, level2

Jika level3 salah dan yang lainnya benar, urutan pemicunya adalah: level1, level2, level3

Kesimpulan berikut dapat diambil dari hasil di atas:

Urutan pemicuan true selalu sebelum false;

Jika beberapa benar, lapisan luar dipicu sebelum lapisan dalam;

Jika beberapa salah, lapisan dalam terpicu sebelum lapisan luar.

Bagaimana cara menggunakannya

 addEventListener('nama acara', fungsi(xxx){xxx}, { tangkapan: salah, pasif: salah, sekali: salah})

Ketiga properti tersebut semuanya merupakan sakelar bertipe Boolean, dan nilai defaultnya salah.

capture: setara dengan parameter useCapture sebelumnya;

sekali: Artinya pendengarnya satu kali, dan akan otomatis dihapusEventListener setelah dieksekusi satu kali;

Pasif: digunakan untuk acara sentuh aplikasi web

Dapat dipahami bahwa ketika browser seluler menggunakan peristiwa, 80% pemroses peristiwa gulir tidak mencegah perilaku default, yang berarti bahwa dalam banyak kasus, browser menunggu dengan sia-sia. Oleh karena itu, lahirlah pendengar pasif. Pasif berarti patuh, yang berarti tidak akan mengatakan tidak pada perilaku default acara tersebut. Setelah browser mengetahui bahwa pendengar bersifat pasif, browser dapat mengeksekusi pendengar di dua thread secara bersamaan . Kode JavaScript dan perilaku default browser.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.