คำอธิบายโดยละเอียดของวิธีแก้ปัญหาการเลื่อนหน้า webapp ที่ค้างอยู่

เมื่อเบราว์เซอร์มือถือเลื่อนหน้าปัจจุบัน (และอาจซูมหน้าด้วย) พฤติกรรมเริ่มต้นจะถูกบล็อก ทำให้หน้าถูกบังคับให้อยู่นิ่ง ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดีและรู้สึกหยุดชั่วคราวเมื่อเลื่อนหน้า

คำอธิบายที่เฉพาะเจาะจงมากขึ้น: เนื่องจากแอตทริบิวต์ที่ยกเลิกได้ของออบเจ็กต์เหตุการณ์ touchstart เป็นจริง กล่าวคือ ผู้ฟังสามารถป้องกันพฤติกรรมเริ่มต้นได้โดยใช้เมธอด PreventDefault() แต่เบราว์เซอร์ไม่สามารถรู้ล่วงหน้าได้ว่า Listener จะเรียก PreventDefault() หรือไม่ สิ่งที่ทำได้คือรอให้ Listener ดำเนินการเสร็จสิ้นก่อนจึงจะดำเนินการตามพฤติกรรมเริ่มต้น -บริโภค ซึ่งจะทำให้หน้าค้าง แม้ว่า Listener จะเป็นฟังก์ชันว่าง แต่ความล่าช้าก็จะเกิดขึ้นเช่นกัน ท้ายที่สุด การดำเนินการของฟังก์ชันว่างก็จะต้องใช้เวลาเช่นกัน

แนวคิดพื้นฐาน: xxx.addEventListener('event name', function(xxx){xxx}, useCapture)

พารามิเตอร์แรกแสดงถึงชื่อเหตุการณ์ (ไม่รวมบน เช่น คลิก) พารามิเตอร์ที่สองแสดงถึงฟังก์ชันเพื่อรับการประมวลผลเหตุการณ์

มาดูกันว่าสิ่งนี้หมายถึงอะไร การยกตัวอย่างโดยตรงจะง่ายกว่า

 <div id=level1> <div id=level2> <div id=level3>กรุณาคลิกที่นี่</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(คลิก, ฟังก์ชัน () { info.innerHTML += ระดับ 1 + <br> }, false);middleDiv.addEventListener(คลิก, ฟังก์ชั่น () { info.innerHTML += ระดับ2 + <br>; }, false);inDiv.addEventListener(คลิก, ฟังก์ชั่น () { info.innerHTML += ระดับ3 + <br>; }, false);

จากโค้ดข้างต้น เรามาดูผลของ useCapture ว่าเป็นจริงและเท็จกัน:

เมื่อทั้งหมดเป็นเท็จ ลำดับทริกเกอร์คือ: ระดับ 3 ระดับ 2 ระดับ 1

เมื่อทั้งหมดเป็นจริง ลำดับที่กระตุ้นคือ: ระดับ 1, ระดับ 2, ระดับ 3

เมื่อระดับ 1 เป็นจริงและอื่น ๆ เป็นเท็จ ลำดับทริกเกอร์คือ: ระดับ 1, ระดับ 3, ระดับ 2

เมื่อระดับ 2 เป็นจริงและอื่น ๆ เป็นเท็จ ลำดับทริกเกอร์คือ: ระดับ 2, ระดับ 3, ระดับ 1

เมื่อระดับ 3 เป็นจริงและอื่น ๆ เป็นเท็จ ลำดับการทริกเกอร์คือ: ระดับ 3, ระดับ 2, ระดับ 1

เมื่อระดับ 1 เป็นเท็จและอื่น ๆ เป็นจริง ลำดับทริกเกอร์คือ: ระดับ 2, ระดับ 3, ระดับ 1

เมื่อระดับ 2 เป็นเท็จและอื่น ๆ เป็นจริง ลำดับทริกเกอร์คือ: ระดับ 1, ระดับ 3, ระดับ 2

เมื่อระดับ 3 เป็นเท็จและอื่น ๆ เป็นจริง ลำดับทริกเกอร์คือ: ระดับ 1, ระดับ 2, ระดับ 3

สามารถสรุปข้อสรุปต่อไปนี้ได้จากผลลัพธ์ข้างต้น:

ลำดับการเรียกของจริงจะอยู่ก่อนเท็จเสมอ

ถ้าหลายรายการเป็นจริง ชั้นนอกจะถูกทริกเกอร์ก่อนชั้นใน

หากหลายรายการเป็นเท็จ ชั้นในจะถูกทริกเกอร์ก่อนชั้นนอก

วิธีการใช้งาน

 addEventListener ('ชื่อเหตุการณ์', ฟังก์ชั่น (xxx) {xxx}, { การจับภาพ: เท็จ, แฝง: เท็จ, หนึ่งครั้ง: เท็จ})

คุณสมบัติทั้งสามนี้เป็นสวิตช์ประเภทบูลีนทั้งหมดและค่าเริ่มต้นเป็นเท็จ

การจับภาพ: เทียบเท่ากับพารามิเตอร์ useCapture ก่อนหน้า

หนึ่งครั้ง: หมายความว่าผู้ฟังเป็นแบบครั้งเดียว และจะถูกลบออกโดยอัตโนมัติEventListener หลังจากถูกดำเนินการเพียงครั้งเดียว

Passive: ใช้สำหรับกิจกรรมการสัมผัสของ webapp

เป็นที่เข้าใจกันว่าเมื่อเบราว์เซอร์มือถือใช้เหตุการณ์ 80% ของผู้ฟังเหตุการณ์การเลื่อนไม่ได้ป้องกันพฤติกรรมเริ่มต้น ซึ่งหมายความว่าในกรณีส่วนใหญ่ เบราว์เซอร์จะรออย่างไร้ผล ดังนั้นผู้ฟังแบบพาสซีฟจึงเกิดขึ้น Passive หมายถึงผู้เชื่อฟังซึ่งหมายความว่าจะไม่ปฏิเสธพฤติกรรมเริ่มต้นของเหตุการณ์ เมื่อเบราว์เซอร์รู้ว่าผู้ฟังเป็นแบบพาสซีฟก็สามารถดำเนินการ Listener ได้ในสองเธรดในเวลาเดียวกัน โค้ด . JavaScript และพฤติกรรมเริ่มต้นของเบราว์เซอร์

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network