mouseenter 和 mouseover 以及 mouseout 和 mouseleave 有什么区别？答案

【问题标题】：What's the difference between mouseenter and mouseover, and mouseout and mouseleave?mouseenter 和 mouseover 以及 mouseout 和 mouseleave 有什么区别？
【发布时间】：2020-02-13 03:30:20
【问题描述】：

我正在查看MDN documentation，上面写着：

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 也会触发。

我在这里有一个 sn-p 显示不同的情况：

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，我希望当您将鼠标悬停在伸出的元素上时，只有那个会变成绿色 - 但父元素也会变成绿色。
对于 mouseover/mouseout，我希望当您将鼠标悬停在伸出的元素上时，只有那个元素会变成绿色 - 但父元素不会变成绿色。
对于 mouseover/mouseout，如果你将鼠标悬停在内部元素上，然后退出它，它会变成蓝色，但我希望父级也会变成蓝色。（虽然我接受这可能是一种竞争条件，它“重新进入”父元素将其变为绿色。

有人能解释一下我在这里遗漏的鼠标事件有什么细微差别吗？

【问题讨论】：

标签： javascript dom mouseevent

【解决方案1】：

在 mouseenter 文档中有解释： “单个 mouseover 事件被发送到 DOM 树的最深元素，然后它会在层次结构中冒泡，直到它被处理程序取消或到达根。”还要检查那里的图表，它可以更容易理解“冒泡”的实际含义。

【讨论】：

【解决方案2】：

我认为 W3schools 的答案（示例）最能说明问题

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseover

对于鼠标悬停在进入或退出包含嵌套 s 的事件时递增，mouseenter 在进入特定 div 区域时递增

【讨论】：