112

jQuery .mouseover()และ.hover()ฟังก์ชันต่างกันอย่างไร หากเหมือนกันทั้งหมดทำไม jQuery จึงใช้ทั้งสองอย่าง?

jquery mouseevent

4

คำถามนี้ไม่ซ้ำกัน ลิงค์ที่คุณให้มามี mouseover และ mouseenter events แต่ของฉันเป็น mouseover และ hover events

— Bhojendra Rauniyar

1

พวกเขาแตกต่างกันเช่นเดียวกับ mouseover nad mouseleave และคำตอบที่ยอมรับด้านล่างไม่ถูกต้อง ... ฟังก์ชัน hover จะเพิ่ม mouseenter และ mouseleve events ไม่ใช่ mouseover และ mouseout events

— Arun P Johny

1

ดูjsfiddle.net/arunpjohny/cZb5b/1เลื่อนเมาส์จากelองค์ประกอบไปที่childและตรวจสอบคอนโซล

— Arun P Johny

@ArunPJohny โปรดอ่านอีกครั้งที่บอกว่า mouseenter และ mouseleave ไม่วางเมาส์เหนือและวางเมาส์

— Bhojendra Rauniyar

1

ด้วยโฮเวอร์ - jsfiddle.net/arunpjohny/cZb5b/2หากคุณสามารถวิเคราะห์คอนโซลได้คุณจะพบความแตกต่าง ...

— Arun P Johny

113

จากเอกสาร jQuery อย่างเป็นทางการ

.mouseover()
เชื่อมโยงตัวจัดการเหตุการณ์กับเหตุการณ์ JavaScript "mouseover" หรือทริกเกอร์เหตุการณ์นั้นในองค์ประกอบ

.hover() ผูกตัวจัดการหนึ่งหรือสองตัวกับองค์ประกอบที่ตรงกันเพื่อดำเนินการเมื่อตัวชี้เมาส์ เข้าและออกจากองค์ประกอบ

การโทร$(selector).hover(handlerIn, handlerOut)เป็นชวเลขสำหรับ: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

.mouseenter()

ผูกตัวจัดการเหตุการณ์ที่จะเริ่มทำงานเมื่อเมาส์เข้าสู่องค์ประกอบหรือทริกเกอร์ตัวจัดการนั้นบนองค์ประกอบ

mouseoverจะเริ่มทำงานเมื่อตัวชี้เคลื่อนที่เข้าไปในองค์ประกอบลูกเช่นกันในขณะที่mouseenterจะเริ่มทำงานเมื่อตัวชี้เคลื่อนที่เข้าไปในองค์ประกอบที่ถูกผูกไว้เท่านั้น

นี่แปลว่าอะไร

ด้วยเหตุนี้.mouseover()คือไม่ได้เช่นเดียวกับ.hover()เหตุผลเดียวกัน.mouseover()คือไม่ได้.mouseenter()เช่นเดียวกับ

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)

— นาวินราอุนิยา
แหล่งที่มา

31

.hover()ฟังก์ชันยอมรับสองอาร์กิวเมนต์ของฟังก์ชันหนึ่งสำหรับmouseenterเหตุการณ์และหนึ่งสำหรับmouseleaveเหตุการณ์

— มิชิก
แหล่งที่มา

นี่เป็นจุดที่ดีในแง่ของความแตกต่างระหว่างฟังก์ชันทั้งสองที่กล่าวถึงในหัวข้อคำถามขอบคุณ! ตรวจสอบลิงค์ด้านล่างของ w3schools เพื่อดูว่า .hover () ทำงานอย่างไร: w3schools.com/jquery/event_hover.asp

— Bahman.A

8

คุณสามารถทดลองใช้http://api.jquery.com/mouseover/ในหน้า jQuery doc เป็นการสาธิตแบบอินเทอร์แอกทีฟเล็ก ๆ น้อย ๆ ที่ดีซึ่งทำให้ชัดเจนและคุณสามารถมองเห็นได้ด้วยตัวคุณเอง

ในระยะสั้นคุณจะสังเกตเห็นว่าเหตุการณ์วางเมาส์เหนือองค์ประกอบเกิดขึ้นเมื่อคุณอยู่เหนือองค์ประกอบนั้นมาจากองค์ประกอบลูกหรือองค์ประกอบหลัก แต่เหตุการณ์ป้อนเมาส์จะเกิดขึ้นเมื่อเมาส์เคลื่อนจากองค์ประกอบหลักไปยังองค์ประกอบนั้นเท่านั้น

— Shivaji Ranaware
แหล่งที่มา

1

จากเอกสารทางการ: ( http://api.jquery.com/hover/ )

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

— Wottensprels
แหล่งที่มา

1

ตามอ่านได้ที่http://api.jquery.com/mouseenter/

เหตุการณ์ JavaScript ของ mouseenter เป็นกรรมสิทธิ์ของ Internet Explorer เนื่องจากยูทิลิตี้ทั่วไปของเหตุการณ์ jQuery จึงจำลองเหตุการณ์นี้เพื่อให้สามารถใช้งานได้โดยไม่คำนึงถึงเบราว์เซอร์ เหตุการณ์นี้ถูกส่งไปยังองค์ประกอบเมื่อตัวชี้เมาส์เข้าสู่องค์ประกอบ องค์ประกอบ HTML ใด ๆ สามารถรับเหตุการณ์นี้ได้

— Edorka
แหล่งที่มา

เมื่อใดที่จะเลือกใช้ฟังก์ชัน mouseover () และ hover ()

จากเอกสาร jQuery อย่างเป็นทางการ

นี่แปลว่าอะไร