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

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

MouseOver():

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

MouseEnter():

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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 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).