Я смотрю на документацию MDN и там написано:
mouseenter A pointing device is moved onto the element that has the listener attached.
mouseleave A pointing device is moved off the element that has the listener attached.
mouseover A pointing device is moved onto the element that has the listener attached or onto one of its children.
mouseout A pointing device is moved off the element that has the listener attached or off one of its children.
Что нормально, звучит как срабатывание mouseenter / mouseleave только на самом элементе, тогда как mouseover / mouse также срабатывает, когда эти события происходят над детьми.
У меня есть фрагмент, показывающий различные случаи:
const body1 = document.getElementById("mouseenter");
const el1 = document.createElement("div");
body1.append(el1);
const el2 = document.createElement("div");
el2.style = "position: relative; top: -60px;";
el1.append(el2);
const el2b = document.createElement("div");
el1.append(el2b);
const el3 = document.createElement("div");
const el4 = document.createElement("div");
el4.style = "position: relative; top: -60px;";
const el4b = document.createElement("div");
const body2 = document.getElementById("mouseover");
body2.append(el3);
el3.append(el4);
el3.append(el4b);
const inHandler = (event) => {
event.target.className = "in";
}
const outHandler = (event) => {
event.target.className = "out";
}
el1.addEventListener("mouseenter", inHandler);
el1.addEventListener("mouseleave", outHandler);
el2.addEventListener("mouseenter", inHandler);
el2.addEventListener("mouseleave", outHandler);
el2b.addEventListener("mouseenter", inHandler);
el2b.addEventListener("mouseleave", outHandler);
el3.addEventListener("mouseover", inHandler);
el3.addEventListener("mouseout", outHandler);
el4.addEventListener("mouseover", inHandler);
el4.addEventListener("mouseout", outHandler);
el4b.addEventListener("mouseover", inHandler);
el4b.addEventListener("mouseout", outHandler);
div {
border: solid 1px black;
margin: 1em;
padding: 1em;
display: inline-block;
min-width: 50px;
min-height: 50px;
background-color: grey;
}
.in {
background-color: green;
}
.out {
background-color: blue;
}
p {
margin-bottom: 2em;
}
<div id = "mouseenter">
<p>mouseenter/mouseleave</p>
</div>
<div id = "mouseover">
<p>mouseover/mouseout</p>
</div>
Теперь, судя по поведению этого кода, мне интересно, есть ли опечатка в этом документе.
Например:
Для mouseenter / mouseleave, я ожидаю, что при наведении курсора на торчащий элемент, только тот становится зеленым - но родитель становится зеленым тоже.
При наведении курсора на мышку я ожидаю, что при наведении курсора на торчащий элемент становится только зеленый, но родительский элемент не становится зеленым.
При наведении курсора мыши / мышке, если вы наводите курсор на внутренний элемент, а затем выходите из него, он становится синим, но я ожидаю, что родитель тоже станет синим. (Хотя я допускаю, что это может быть условием гонки, когда он «повторно» входит в родительский элемент, чтобы сделать его зеленым.
Может кто-нибудь объяснить, какой нюанс о событиях мыши, которые я здесь упускаю?