Jquery mouseenter () против mouseover ()

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

MouseOver ():

Срабатывает при входе в элемент и всякий раз, когда в элементе происходят движения мыши.

MouseEnter ():

Будет стрелять при входе в элемент.

Я придумал скрипку, которая использует оба, и они кажутся довольно похожими. Может кто-нибудь, пожалуйста, объясните мне разницу между ними?

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

Событие mouseover отправляется элементу, когда указатель мыши входит в элемент

Событие 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
• Mouseover
• 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 события отличаются от отведения указателя мыши в том , как он обрабатывает бульканье события . MouseLeave событие, только запускает свой обработчик , когда мышь покидает элемент он обязан, а не потомок . См .: https://api.jquery.com/mouseleave/.

Этот пример демонстрирует разницу между перемещением мыши , указателем мыши и наведением мыши :

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).

Старый вопрос, но все еще нет хорошего актуального ответа с пониманием IMO.

В наши дни все браузеры поддерживают mouseover/mouseoutи mouseenter/mouseleave. Тем не менее, jQuery не регистрирует ваш обработчик mouseenter/mouseleave, но молча помещает их в обертки, mouseover/mouseoutкак показано в следующем коде, и дает свою немного отличную интерпретацию mouseenter/mouseleave.

Точное поведение событий особенно важно для «обработчиков делегатов». К сожалению, jQuery также имеет свою собственную интерпретацию того, что представляют собой обработчики делегатов и что они должны получать для событий. Этот факт показан в другом ответе для более простого события щелчка.

Итак, как правильно ответить на вопрос о jQuery, который использует формулировку Javascript для событий и обработчиков, но делает оба отличия и даже не упоминает об этом в своей документации?

Сначала различия в «реальном» Javascript:

• обе
  • мышь может «перепрыгивать» из внешних / внешних элементов во внутренние / самые внутренние элементы, когда она перемещается быстрее, чем браузер определяет ее положение
  • любой enter/overполучает соответствующий leave/out(возможно поздно / нервный)
  • события идут к видимому элементу под указателем (невидимый → не может быть целью)
• mouseenter/mouseleave
  • доставляется до элемента, где зарегистрирован (цель)
  • всякий раз, когда элемент или любой потомок (например, путем прыжка) вводится / оставляется
  • он не может пузыриться, потому что концептуально потомки считаются частью рассматриваемого элемента, то есть нет дочерних элементов, из которых могло бы произойти другое событие (со значением «ввели / оставили» родительский элемент ?!)
  • у детей также могут быть зарегистрированы похожие обработчики, которые вводятся / уходят правильно, но не связаны с родительским циклом ввода / вывода
• mouseover/mouseout
  • цель - фактический элемент под указателем
    • целью не может быть две вещи: т.е. не родитель и ребенок одновременно
  • событие не может «гнездиться»
    • прежде чем ребенок может быть «переедан», родитель должен «выйти»
  • может всплыть, потому что target / 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>