时间戳

首页 > 解决方案 > mouseenter 和 mouseover 以及 mouseout 和 mouseleave 有什么区别？

javascript - mouseenter 和 mouseover 以及 mouseout 和 mouseleave 有什么区别？

问题描述

我正在查看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>

现在判断这段代码的行为——我想知道那个文档中是否有错字。

例如：

有人可以解释一下我在这里缺少的鼠标事件有什么细微差别吗？

标签： javascriptdommouseevent

解决方案

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

推荐阅读