Jquery mouseenter () vs mouseover ()

Vì vậy, sau khi đọc một câu hỏi được trả lời gần đây, tôi không rõ liệu tôi có thực sự hiểu sự khác biệt giữa mouseenter()và mouseover(). Các bài viết nhà nước

Di chuột lên trên():

Sẽ kích hoạt khi vào một phần tử và bất cứ khi nào có bất kỳ chuyển động chuột nào xảy ra trong phần tử.

Chuột Entry ():

Sẽ bắn khi vào một yếu tố.

Tôi đã nghĩ ra một câu đố sử dụng cả hai và chúng có vẻ khá giống nhau. Ai đó có thể vui lòng giải thích cho tôi sự khác biệt giữa hai?

Tôi cũng đã thử đọc các định nghĩa JQuery, cả hai đều nói cùng một điều.

Sự kiện di chuột được gửi đến một phần tử khi con trỏ chuột vào phần tử

Sự kiện mouseenter được gửi đến một phần tử khi con trỏ chuột vào phần tử.

Ai đó có thể xin vui lòng làm rõ với một ví dụ?

Bạn thấy hành vi khi phần tử đích của bạn chứa các phần tử con:

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

Mỗi lần chuột của bạn xâm nhập hoặc để lại một phần tử con, mouseoverđược kích hoạt, nhưng không 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>

Đây là một trong những ví dụ tốt nhất mà tôi đã tìm thấy:

• chuột
• Di chuột lên trên
• di chuột
• bẫy chuột

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

Mặc dù chúng hoạt động theo cùng một cách, tuy nhiên, mouseentersự kiện chỉ kích hoạt khi con trỏ chuột vào phần tử được chọn . Sự mouseoverkiện được kích hoạt nếu một con trỏ chuột cũng nhập vào bất kỳ phần tử con nào .

Xem mã ví dụ và bản demo ở cuối trang tài liệu jquery:

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

... mouseover cũng kích hoạt khi con trỏ di chuyển vào phần tử con, trong khi mouseenter chỉ kích hoạt khi con trỏ di chuyển vào phần tử bị ràng buộc.

Các mouseenter sự kiện khác từ mouseover trong cách nó xử lý sự kiện bọt . Sự kiện mouseenter , chỉ kích hoạt trình xử lý của nó khi chuột vào phần tử mà nó bị ràng buộc, không phải là hậu duệ . Tham khảo: https://api.jquery.com/mouseenter/

Các MouseLeave sự kiện khác từ mouseout trong cách nó xử lý sự kiện bọt . Sự kiện mouseleave , chỉ kích hoạt xử lý của nó khi chuột rời khỏi phần tử mà nó bị ràng buộc, không phải là hậu duệ . Tham khảo: https://api.jquery.com/mouseleave/

Ví dụ này cho thấy sự khác biệt giữa các sự kiện mousemove , mouseenter và 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 : xảy ra mỗi khi con trỏ chuột được di chuyển qua phần tử div.
• onmouseenter : chỉ xảy ra khi con trỏ chuột vào phần tử div.
• onmouseover : xảy ra khi con trỏ chuột vào phần tử div và các phần tử con của nó (p và span).

Câu hỏi cũ, nhưng vẫn không có câu trả lời cập nhật tốt với imo cái nhìn sâu sắc.

Những ngày này, tất cả các trình duyệt hỗ trợ mouseover/mouseoutvà mouseenter/mouseleave. Tuy nhiên, jQuery không đăng ký trình xử lý của bạn mouseenter/mouseleave, nhưng âm thầm đặt chúng trên một trình bao bọc xung quanh mouseover/mouseoutnhư đoạn mã sau đây cho thấy và làm cho cách hiểu của nó hơi khác mouseenter/mouseleave.

Hành vi chính xác của các sự kiện đặc biệt có liên quan trên các trình xử lý đại biểu của Wap. Thật không may, jQuery cũng có cách hiểu khác nhau về trình xử lý đại biểu và những gì họ sẽ nhận được cho các sự kiện. Thực tế đó được thể hiện trong một câu trả lời khác cho sự kiện nhấp chuột đơn giản hơn.

Vậy làm thế nào để trả lời đúng một câu hỏi về jQuery, sử dụng từ ngữ Javascript cho các sự kiện và trình xử lý, nhưng làm cho cả hai khác nhau và thậm chí không đề cập đến điều đó trong tài liệu của nó?

Đầu tiên, sự khác biệt trong Javascript thực tế của Javascript:

• cả hai
  • chuột có thể nhảy nhảy từ các yếu tố bên ngoài / bên ngoài sang các yếu tố bên trong / bên trong khi di chuyển nhanh hơn so với trình duyệt lấy mẫu vị trí của nó
  • bất kỳ enter/overđược một tương ứng leave/out(có thể muộn / tăng vọt)
  • các sự kiện đi đến phần tử hiển thị bên dưới con trỏ (vô hình → không thể là mục tiêu)
• mouseenter/mouseleave
  • được gửi đến phần tử đã đăng ký (mục tiêu)
  • Bất cứ khi nào phần tử hoặc bất kỳ hậu duệ (ví dụ bằng cách nhảy) được nhập / trái
  • Nó không thể bong bóng, vì về mặt khái niệm, hậu duệ được coi là một phần của yếu tố được đề cập, tức là không có đứa trẻ nào mà sự kiện khác có thể đến từ đó (với ý nghĩa là đã nhập / rời bỏ cha mẹ?!)
  • trẻ em cũng có thể có những người xử lý tương tự đã đăng ký, nhập / nghỉ chính xác, nhưng không liên quan đến chu kỳ nhập / nghỉ của cha mẹ
• mouseover/mouseout
  • mục tiêu là thành phần thực tế bên dưới con trỏ
    • một mục tiêu không thể là hai điều: tức là không phải cha mẹ và con cùng một lúc
  • sự kiện không thể lồng tổ
    • trước khi một đứa trẻ có thể bị vượt qua phạm vi, cha mẹ cần phải nhận được ra khỏi tinh thần
  • có thể bong bóng, vì mục tiêu / liên quanTarget chỉ ra nơi sự kiện xảy ra

Sau một số thử nghiệm, nó cho thấy rằng miễn là bạn không sử dụng các trình xử lý ủy nhiệm jQuery với đăng ký bộ chọn, thì việc mô phỏng là không cần thiết nhưng hợp lý: Nó lọc ra mouseover/mouseoutcác sự kiện mà mouseenter/mouseleavekhông thể có được. Mục tiêu là lộn xộn, mặc dù. Thực tế mouseenter/mouseleavesẽ cung cấp cho phần tử xử lý làm mục tiêu, mô phỏng có thể chỉ ra các phần tử con của phần tử đó, tức là bất cứ thứ gì mouseover/mouseoutđược mang theo.

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>