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

Question

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

MouseOver ():

Будет срабатывать при входе в элемент и при любом движении мыши происходят внутри элемента.

MouseEnter ():

Сработает при входе в элемент.

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

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

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

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

Может кто-нибудь уточнить с примером?

Answer 1

Вы видите поведение, когда ваш целевой элемент содержит дочерние элементы:

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>

Answer 2

Это один из лучших примеров, которые я нашел:

• mouseenter
• mouseover
• mouseout
• mouseleave

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

Answer 3

Хотя они работают одинаково, однако, событие mouseenter только срабатывает, когда указатель мыши входит в выбранный элемент . Событие mouseover запускается , если указатель мыши также входит в любые дочерние элементы .

Answer 4

Событие mouseenter отличается от mouseover тем, как оно обрабатывает всплывающее сообщение .Событие mouseenter , только запускает его обработчик, когда мышь входит в элемент , с которым она связана, не является потомком .См .: https://api.jquery.com/mouseenter/

Событие mouseleave отличается от mouseout тем, как оно обрабатывает всплывающее сообщение .Событие mouseleave , только запускает его обработчик, когда мышь покидает элемент , с которым она связана, не является потомком .См .: https://api.jquery.com/mouseleave/

Answer 5

См. Пример кода и демонстрацию в нижней части страницы документации jquery:

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

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

Answer 6

Этот пример демонстрирует разницу между 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).