mouseout () และ mouseleave () ของ jQuery แตกต่างกันอย่างไร

mouseout () และ mouseleave () ของ jQuery แตกต่างกันอย่างไร

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

ที่มา: http://api.jquery.com/mouseleave/

สามารถมีได้ครั้งเมื่อเป็นทางเลือกที่ดีกว่าmouseoutmouseleave

mouseenterตัวอย่างเช่นสมมติว่าคุณได้สร้างคำแนะนำเครื่องมือที่คุณต้องการแสดงถัดจากองค์ประกอบบน คุณใช้setTimeoutเพื่อป้องกันไม่ให้คำแนะนำเครื่องมือโผล่ขึ้นมาทันที คุณล้างการหมดเวลาในการmouseleaveใช้งานclearTimeoutดังนั้นหากเมาส์ออกจากคำแนะนำเครื่องมือจะไม่ปรากฏขึ้น สิ่งนี้จะได้ผล 99% ของเวลา

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

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

การใช้mouseoutในกรณีนี้จะเป็นวิธีแก้ปัญหาที่เหมาะสมเพราะมันจะลุกเป็นไฟ

เอกสาร jQuery API:

mouseout

เหตุการณ์ประเภทนี้อาจทำให้ปวดหัวได้มากเนื่องจากเหตุการณ์เดือดปุด ๆ ตัวอย่างเช่นเมื่อตัวชี้เมาส์เลื่อนออกจากองค์ประกอบด้านในในตัวอย่างนี้เหตุการณ์เมาส์เอาท์จะถูกส่งไปยังสิ่งนั้นจากนั้นจึงเลื่อนขึ้นไปด้านนอก สิ่งนี้สามารถทริกเกอร์ตัวจัดการเมาส์เอาต์ที่ถูกผูกไว้ในช่วงเวลาที่ไม่เหมาะสม ดูการอภิปรายสำหรับ. mouseleave () สำหรับทางเลือกที่มีประโยชน์

ดังนั้นmouseleaveเป็นเหตุการณ์ที่กำหนดเองซึ่งได้รับการออกแบบมาเพราะเหตุผลดังกล่าวข้างต้น

http://api.jquery.com/mouseleave/

Event Mouseout จะทริกเกอร์เมื่อเมาส์ออกจากองค์ประกอบที่เลือกและเมื่อเมาส์ออกจากองค์ประกอบลูกด้วย

องค์ประกอบ Mouseleave ของเหตุการณ์จะทริกเกอร์เมื่อตัวชี้จะออกจากองค์ประกอบที่เลือกเท่านั้น

อ้างอิง: W3School