ใช้ระบบป้องกันการสั่นเพื่อทำให้ DIV หายไปเมื่อเลื่อนเมาส์ออก
เนื่องจากแท็ก div เองไม่รองรับเหตุการณ์ onblur สำหรับ div ที่ปรากฏขึ้นเมื่อมีการคลิกปุ่ม เราจึงต้องการทำให้มันหายไปเมื่อ div สูญเสียโฟกัสและไม่สามารถทำได้โดยใช้ onblur
แต่คุณสามารถใช้ onmouseout และเหตุการณ์ต่างๆ เพื่อตระหนักถึงการทำงานของ DIV ที่สูญเสียโฟกัสและหายไป อาจมีปัญหาในการใช้ onmouseout โดยตรงเพื่อให้ทราบถึงการลบและการหายไป: หากตำแหน่งของปุ่มและตำแหน่งของ div ป๊อปอัปไม่ตรงกัน เหตุการณ์ onmouseout จะถูกทริกเกอร์ทันทีเมื่อเมาส์เคลื่อนที่ ซึ่งไม่มีประโยชน์
ใช้การผสมผสานระหว่างการป้องกันภาพสั่นไหว การเปิดเมาส์ออก และการเปิดเมาส์โอเวอร์เพื่อให้ได้ภาพเบลอพร้อมประสบการณ์ที่ดี
/** *เมาส์เลื่อนไปเหนือเหตุการณ์ div*/ function moveOverEvent(ele,outTimer) { ให้ overTimer = null; return function(){ clearTimeout(outTimer); //หาก div ไม่หายไป ให้ย้าย div เข้าไปแล้วจึง Clear เหตุการณ์ที่ถูกลบล่าสุด clearTimeout(overTimer); //Anti-shake overTimer = setTimeout(()=>{ ele.style.display = block; },500); เมาส์เลื่อนออก*/ function moveOutEvent(ele,outTimer) { return function(){ clearTimeout(outTimer); //Anti-shake outTimer = setTimeout(()=>{ //รอ 500ms หลังจากย้ายออก แล้วหายไป div ele นี้ .style .display = ไม่มี; },500);จากนั้นฉันก็ค้นพบโดยบังเอิญว่าเหตุการณ์เบลอสามารถใช้งานได้โดยการเพิ่มแอตทริบิวต์ tabindex ให้กับ div ดังนั้นโค้ดข้างต้นอาจถูกเขียนอย่างไร้ประโยชน์ (ป.ล. ฉันรู้สึกว่าประสบการณ์ข้างต้นจะดีกว่าและลดการสัมผัสโดยไม่ตั้งใจได้มาก)
//หลังจากตั้งค่า tabindex แล้ว องค์ประกอบจะเพิ่มเส้นประตามค่าเริ่มต้นและลบออกผ่าน ouline=0 (IE ตั้งค่า Hidefocus=true) <div tabindex=0 เค้าร่าง=0 Hidefocus=true></div>
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network