JQuery mouseenter () vs mouseover ()

ดังนั้นหลังจากที่ได้อ่านเมื่อเร็ว ๆ นี้ตอบคำถามที่ผมไม่มีความชัดเจนว่าผมเข้าใจความแตกต่างระหว่างและmouseenter() mouseover()สถานะการโพสต์

MouseOver ():

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

MouseEnter ():

จะยิงเมื่อเข้าสู่องค์ประกอบ

ฉันเกิดซอที่ใช้ทั้งคู่และดูเหมือนว่าจะคล้ายกันมาก ใครช่วยอธิบายความแตกต่างระหว่างสองคนนี้ให้ฉันได้บ้าง

ฉันได้ลองอ่านคำจำกัดความของ JQuery แล้วทั้งคู่ก็พูดในสิ่งเดียวกัน

เหตุการณ์การวางเมาส์ถูกส่งไปยังองค์ประกอบเมื่อตัวชี้เมาส์เข้าสู่องค์ประกอบ

เหตุการณ์ Mouseenter จะถูกส่งไปยังองค์ประกอบเมื่อตัวชี้เมาส์เข้าสู่องค์ประกอบ

มีคนช่วยอธิบายด้วยตัวอย่างได้ไหม

คุณเห็นพฤติกรรมเมื่อองค์ประกอบเป้าหมายของคุณมีองค์ประกอบย่อย:

http://jsfiddle.net/ZCWvJ/7/

แต่ละครั้งที่เมาส์ของคุณเข้าหรือออกจากองค์ประกอบที่เด็กmouseoverจะถูกเรียก mouseenterแต่ไม่

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

นี่เป็นหนึ่งในตัวอย่างที่ดีที่สุดที่ฉันได้พบ:

• mouseenter
• วางเมาส์
• mouseout
• MouseLeave

http://bl.ocks.org/mbostock/5247027

แม้ว่าพวกเขาจะดำเนินการในลักษณะเดียวกัน แต่mouseenterเหตุการณ์เดียวทริกเกอร์เมื่อตัวชี้เมาส์เข้าองค์ประกอบที่เลือก mouseoverเหตุการณ์จะถูกเรียกถ้าตัวชี้เมาส์เข้าองค์ประกอบของเด็ก ๆ ได้เป็นอย่างดี

ดูตัวอย่างรหัสและการสาธิตที่ด้านล่างของหน้าเอกสาร jquery:

http://api.jquery.com/mouseenter/

... mouseover ไฟไหม้เมื่อตัวชี้ย้ายไปยังองค์ประกอบลูกเช่นกันในขณะที่ mouseenter ไฟไหม้เฉพาะเมื่อตัวชี้ย้ายเข้าสู่องค์ประกอบที่ถูกผูกไว้

mouseenterเหตุการณ์ที่แตกต่างจากการวางเมาส์ในวิธีที่จะจัดการเดือดเหตุการณ์ mouseenterเหตุการณ์เพียงก่อให้เกิดการจัดการของมันเมื่อเมาส์เข้าองค์ประกอบมันถูกผูกไว้ที่จะไม่ได้ลูกหลาน อ้างอิง: https://api.jquery.com/mouseenter/

MouseLeaveเหตุการณ์ที่แตกต่างจากmouseoutในวิธีที่จะจัดการเดือดเหตุการณ์ MouseLeaveเหตุการณ์เพียงก่อให้เกิดการจัดการของมันเมื่อเมาส์ใบองค์ประกอบมันถูกผูกไว้ที่จะไม่ได้ลูกหลาน อ้างอิง: https://api.jquery.com/mouseleave/

ตัวอย่างนี้แสดงให้เห็นถึงความแตกต่างระหว่างเหตุการณ์mousemove , mouseenterและmouseover :

https://jsfiddle.net/z8g613yd/

HTML:

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS:

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS:

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

• onmousemove : เกิดขึ้นทุกครั้งที่มีการย้ายตัวชี้เมาส์เหนือองค์ประกอบ div
• onmouseenter : เกิดขึ้นเมื่อตัวชี้เมาส์เข้าองค์ประกอบ div เท่านั้น
• onmouseover : เกิดขึ้นเมื่อตัวชี้เมาส์เข้าองค์ประกอบ div และองค์ประกอบย่อย (p และ span)

คำถามเก่า แต่ก็ยังไม่มีคำตอบที่ทันสมัยพร้อมข้อมูลเชิงลึก

วันนี้เบราว์เซอร์สนับสนุนและmouseover/mouseout mouseenter/mouseleaveอย่างไรก็ตาม jQuery ไม่ได้ลงทะเบียนจัดการของคุณไปmouseenter/mouseleaveแต่ทำให้เงียบพวกเขาในห่อรอบเป็นแสดงให้เห็นว่ารหัสต่อไปและทำให้การตีความแตกต่างกันเล็กน้อยของตัวเองของmouseover/mouseoutmouseenter/mouseleave

พฤติกรรมที่แน่นอนของกิจกรรมมีความเกี่ยวข้องโดยเฉพาะอย่างยิ่งใน "ผู้จัดการมอบหมาย" น่าเสียดายที่ jQuery มีการตีความที่แตกต่างกันไปของตัวจัดการผู้รับมอบสิทธิ์และสิ่งที่พวกเขาควรได้รับสำหรับเหตุการณ์ ความจริงนั้นปรากฏในคำตอบอื่นสำหรับเหตุการณ์การคลิกที่ง่ายขึ้น

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

ครั้งแรกที่ความแตกต่างใน Javascript "ของจริง":

• ทั้งสอง
  • เมาส์สามารถ“ กระโดด” จากองค์ประกอบภายนอก / ภายนอกไปยังองค์ประกอบภายใน / ภายในสุดเมื่อเคลื่อนที่เร็วกว่าเบราว์เซอร์ตัวอย่างตำแหน่ง
  • ใด ๆ ที่enter/overได้รับที่สอดคล้องกันleave/out(อาจจะช้า / น่ากลัว)
  • กิจกรรมไปที่องค์ประกอบที่มองเห็นได้ด้านล่างตัวชี้ (มองไม่เห็น→ไม่สามารถกำหนดเป้าหมายได้)
• mouseenter/mouseleave
  • ถูกส่งไปยังองค์ประกอบที่ลงทะเบียน (เป้าหมาย)
  • เมื่อใดก็ตามที่องค์ประกอบหรือลูกหลานใด ๆ (เช่นโดยการกระโดด) ถูกป้อน / ซ้าย
  • มันไม่สามารถทำให้เกิดฟองได้เนื่องจากในความคิดลูกหลานได้รับการพิจารณาว่าเป็นส่วนหนึ่งขององค์ประกอบที่กล่าวถึงนั่นคือไม่มีเด็ก ๆ ที่เหตุการณ์อื่นอาจมาจาก (โดยมีความหมายว่า "ป้อน / ซ้าย" ผู้ปกครอง?!)
  • เด็กอาจมีตัวจัดการที่คล้ายกันที่ลงทะเบียนซึ่งเข้า / ออกอย่างถูกต้อง แต่ไม่เกี่ยวข้องกับวงจรการเข้า / ออกจากผู้ปกครอง
• mouseover/mouseout
  • เป้าหมายคือองค์ประกอบจริงใต้ตัวชี้
    • เป้าหมายไม่สามารถเป็นสองสิ่ง: กล่าวคือไม่ใช่พ่อแม่และลูกในเวลาเดียวกัน
  • เหตุการณ์ไม่สามารถ“ ทำรัง”
    • ก่อนที่เด็กจะ“ overed” ผู้ปกครองจะต้อง“ ออก”
  • สามารถบับเบิลเนื่องจากเป้าหมาย / relatedTarget ระบุว่าเหตุการณ์เกิดขึ้นที่ใด

หลังจากการทดสอบบางอย่างมันแสดงให้เห็นว่าตราบใดที่คุณไม่ได้ใช้ jQuery“ ตัวจัดการผู้รับมอบสิทธิ์ด้วยการลงทะเบียนตัวเลือก” การจำลองนั้นไม่จำเป็น แต่สมเหตุสมผล: มันกรองmouseover/mouseoutเหตุการณ์ที่ a mouseenter/mouseleaveจะไม่ได้รับ แม้ว่าเป้าหมายจะยุ่งเหยิง ของจริงmouseenter/mouseleaveจะให้องค์ประกอบจัดการเป็นเป้าหมายการจำลองอาจบ่งบอกถึงเด็ก ๆ ขององค์ประกอบนั้นคือสิ่งที่mouseover/mouseoutดำเนินการ

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>