ฉันได้สัมผัสกับเหตุการณ์ onmouseover และเหตุการณ์ onmouseout ในสองวันที่ผ่านมา ฉันมักจะคิดว่าพวกเขาเพียงแค่เรียกเหตุการณ์เมื่อตัวชี้เมาส์ย้ายไปที่องค์ประกอบและเรียกเหตุการณ์เมื่อตัวชี้เมาส์ย้ายออกจากวัตถุที่ระบุ แต่ทันใดนั้นฉันก็พบว่าสิ่งเหล่านี้เป็นเพียงคำอธิบายง่ายๆของพวกเขา ลองมาดูพวกเขาด้วยกันหลังจากทั้งหมดพวกเขายังคงมีคุณสมบัติแปลก ๆ ดีหรือไม่ดี?
ใช้กล่องแรก:
ผูกกิจกรรม OnMouseOver และกิจกรรม OnMouseOut ในช่องนี้
ค้นพบว่าจะไม่มีอะไรเกิดขึ้นกับพวกเขาแล้ว (ฮิฮิคุณก็รู้!)
มาสร้างองค์ประกอบ B กันเพื่อให้มันซ้อนกันในองค์ประกอบ A เป็นองค์ประกอบของเด็กของก
เรายังคงเชื่อมโยงเหตุการณ์ OnMouseOver และเหตุการณ์ OnMouseOut กับองค์ประกอบหลักของผู้ปกครอง A. คุณจะหาอะไรได้บ้าง? ใช่ถูกต้อง! เมื่อเมาส์เคลื่อนที่เข้ามาและลบองค์ประกอบเด็ก B ของ A เหตุการณ์ onmouseover และเหตุการณ์ onmouseout ก็เกิดขึ้นเช่นกัน! - ทำไม นี่ไม่ใช่สิ่งที่ฉันต้องการ! B ไม่ได้เป็นส่วนหนึ่งของ A ในเวลานี้หรือไม่? ไม่แน่นอนมิฉะนั้นเหตุการณ์ onmouseover จะไม่เกิดขึ้นเมื่อองค์ประกอบ B ถูกย้ายไป สิ่งนี้พิสูจน์ได้ว่าองค์ประกอบ B ยังคงเป็นส่วนหนึ่งของ A.
แล้วเกิดอะไรขึ้น? ท้ายที่สุดเหตุการณ์กำลังทำผิด? ทุกคนรู้ว่ามีสตรีมเหตุการณ์สองชนิดในเบราว์เซอร์ที่ใช้กันทั่วไป: ฟองสบู่และการจับเหตุการณ์ ลองดูที่คำจำกัดความของฟองสบู่: เหตุการณ์จะเผยแพร่ทีละขั้นตอนจากเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงที่สุดไปยังเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงน้อยที่สุด (วัตถุเอกสาร) ดังนั้นเมื่อเมาส์เคลื่อนเข้ามาและลบองค์ประกอบลูกของ A เหตุการณ์ Onmouseover ของ B และเหตุการณ์ OnMouseOut จะถูกกระตุ้น แต่มันไม่มีเหตุการณ์ทั้งสองนี้ดังนั้นมันจึงส่งผ่านเหตุการณ์ทั้งสองนี้ไปยังองค์ประกอบหลัก A. A มีเหตุการณ์สองเหตุการณ์นี้ดังนั้นสถานการณ์ที่เราเห็นเกิดขึ้น
บางคนจะพูดวิธีหลีกเลี่ยง ท้ายที่สุดไม่ใช่ทุกคนที่มีความต้องการแบบนี้ เราแค่ต้องการเหตุการณ์องค์ประกอบหลักในการกระตุ้นและปล่อยให้องค์ประกอบของเด็กเป็นผู้ชายที่หล่อเหลาอย่างเงียบ ๆ
ดังนั้น W3C จึงเพิ่มแอตทริบิวต์เป้าหมายที่เกี่ยวข้องในกิจกรรม MouseOver และ MouseOut:
•ในเหตุการณ์ MouseOver มันระบุว่าองค์ประกอบใดที่เมาส์มาจาก
•ในเหตุการณ์ Mouseout มันชี้ไปที่องค์ประกอบที่เมาส์ไป
อย่างไรก็ตาม Microsoft ได้เพิ่มแอตทริบิวต์สองรายการในกิจกรรม MouseOver และ Mouseout
•จากการเลือกตั้งในเหตุการณ์ MouseOver ระบุว่าองค์ประกอบใดที่เมาส์มาจาก
• toElement องค์ประกอบที่ชี้ไปที่เมาส์ในเหตุการณ์ Mouseout
ดังนั้นเราจึงมีการใช้งานรหัสต่อไปนี้
document.getElementById ('box1'). onMouseOver = function (e) {ถ้า (! e) e = window.event; var reltg = e.RelatedTarget? E.RelatedTarget: e.fromelement; ในขณะที่ (reltg && reltg! = this) reltg = reltg.parentNode; ถ้า (reltg! = นี้) {// ที่นี่คุณสามารถเขียนรหัสการประมวลผลสำหรับการแจ้งเตือนเหตุการณ์ onmouseenter ('111'); window.event; var reltg = e.RelatedTarget? E.RelatedTarget: e.toElement; ในขณะที่ (reltg && reltg! = this) reltg = reltg.parentNode; ถ้า (reltg! = สิ่งนี้) {// ที่นี่คุณสามารถเขียนการแจ้งเตือนการประมวลผลรหัสเหตุการณ์ onmouseleave ('2222');}}}}}ข้างต้นเป็นความเข้าใจที่ครอบคลุมเกี่ยวกับเหตุการณ์ onmouseover และเหตุการณ์ onmouseout แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!