Jquery mouseenter () vs mouseover ()

Тож після прочитання нещодавно відповітого питання мені незрозуміло, чи дійсно я розумію різницю між mouseenter()та mouseover(). Пост констатує

MouseOver ():

Буде стріляти при введенні елемента та кожного разу, коли в ньому відбудуться будь-які рухи миші.

MouseEnter ():

Запуститься при введенні елемента.

Я придумав загадку, яка використовує і те, і інше, вони здаються досить схожими. Може хтось, будь ласка, пояснить мені різницю між ними?

Я також спробував прочитати визначення JQuery, обидва говорять те саме.

Подія перемикання миші надсилається елементу, коли вказівник миші вводить елемент

Подія мишоцентру надсилається елементу, коли вказівник миші вводить елемент.

Чи може хтось, будь ласка, уточнити на прикладі?

Ви бачите поведінку, коли ваш цільовий елемент містить дочірні елементи:

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>

Це один із найкращих прикладів, які я знайшов:

• мишоцентр
• миші
• мишоут
• мишоловка

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

Хоча вони діють однаково, проте mouseenterподія запускається лише тоді, коли вказівник миші вводить обраний елемент . mouseoverПодія спрацьовує , якщо покажчик миші входить в дочірні елементи , а також .

Дивіться приклад коду та демонстрацію внизу сторінки документації jquery:

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

... миша запускається, коли вказівник переміщується і в дочірній елемент, тоді як мишенцент запускається лише тоді, коли вказівник переміщується у пов'язаний елемент.

У MouseEnter подія відрізняється від наведення курсору миші в тому , як вона обробляє булькання події . MouseEnter подія, тільки запускає свій обробник , коли миша входить в елемент він зобов'язаний, а , не нащадок . Посилання: https://api.jquery.com/mouseenter/

У MouseLeave події відрізняються від відведення покажчика миші в тому , як він обробляє булькання події . MouseLeave подія, тільки запускає свій обробник , коли миша залишає елемент він зобов'язаний, а , не нащадок . Посилання: https://api.jquery.com/mouseleave/

Цей приклад демонструє різницю між MouseMove , MouseEnter і при наведенні курсору миші події:

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/mouseoutяк показано в наступному коді, і робить свою трохи іншу інтерпретацію mouseenter/mouseleave.

Точна поведінка подій особливо актуальна для "делегованих обробників". На жаль, jQuery також має свою різну інтерпретацію того, що таке обробники делегатов і що вони повинні отримувати для подій. Цей факт показаний в іншій відповіді на простішу подію клацання.

Тож як правильно відповісти на питання про jQuery, який використовує формулювання Javascript для подій та обробників, але робить їх різними і навіть не згадує про це у своїй документації?

По-перше, відмінності у "реальному" Javascript:

• і те й інше
  • миша може «перестрибувати» з зовнішніх / зовнішніх елементів до внутрішніх / внутрішніх елементів, коли рухається швидше, ніж браузер відбирає своє положення
  • будь-який enter/overотримує відповідне leave/out(можливо, запізнення / стрибки)
  • події переходять до видимого елемента під вказівником (невидимий → не може бути націлений)
• mouseenter/mouseleave
  • доставляється елементу, де зареєстровано (цільовий)
  • кожного разу, коли елемент або будь-який нащадок (наприклад, стрибком) вводиться / залишається
  • він не може міхур, тому що концептуально нащадків вважають частиною відповідного елемента, тобто немає дітей, з яких могла б відбутися інша подія (зі значенням "введений / залишений" батько ?!)
  • діти можуть також зареєструвати подібні обробники, які вводять / залишають правильно, але не мають відношення до батьківського циклу входу / відпустки
• mouseover/mouseout
  • ціль - фактичний елемент під вказівником
    • ціль не може бути двома речами: тобто не батьком і дитиною одночасно
  • подія не може «гніздитися»
    • перш ніж дитину можна було «пережити», батьку потрібно «вийти»
  • може міхур, тому що ціль / relatedTarget вказують, де відбулася подія

Після деякого тестування воно показує, що доки ви не використовуєте jQuery «делегат обробників з реєстрацією селектора», емуляція є непотрібною, але розумною: вона фільтрує mouseover/mouseoutподії, до 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>