javascript - 当鼠标在子元素之间移动时，如何不被 mouseover/mouseout 事件垃圾邮件？

Question

最好用一个例子来解释:

var root = document.querySelector("#a");
var msg_stack = document.querySelector("#msg_stack");
var last_msg = document.querySelector("#dummy");

function pad(v) {
  v = "" + v;
  while (v.length < 3) v = "0" + v;
  return v;
}

function hover(v) {
  var msg = document.createElement("div");
  msg.innerText = pad(msg_stack.children.length) + ": " + v;
  
  last_msg = msg_stack.insertBefore(msg, last_msg);
}

root.addEventListener("mouseover", function() { hover(true); });
root.addEventListener("mouseout", function() { hover(false); });

#a {
  position:absolute;
  left:10px;top:10px;width:200px;height:50px;
  background-color:red;
}

#b {
  position:absolute;
  right:0px;top:0px;width:50px;height:200px;
  background-color:red;
}

#b:after {
  content:"";
  position:absolute;
  left:0;top:0;height:50px;
  border-left:solid 1px blue;
}

#msg_stack {
  position:absolute;
  left:230px;top:10px;width:500px;height:200px;
}

<div id="a"><div id="b"></div></div>
<div id="msg_stack"><div id="dummy"></div></div>

请注意，当您将鼠标移到蓝色边框上但仍停留在红色边框内时，它会被不必要的 mouseout/mouseover 事件所淹没。

在我的情况下，这是昂贵的，在我的网页中，我将元素分层放置在彼此之上 5 深，因此垃圾邮件更糟糕。每次鼠标悬停/鼠标移出都会触发一系列其他事情，如果这种情况在一毫秒内发生 10 次，就会让事情变得卡顿。

我不想禁用在 html 层次结构中传递的事件(如在#b 中触发鼠标事件在#a 中)，这是可取的，因为我在我的页面上监视的东西也有奇怪的形状。

如果鼠标没有真正离开受监视元素及其子元素的范围，是否有办法避免 mouseout/mouseover 垃圾邮件？

或者，有没有办法在处理当前(mouseout)事件时检测到另一个事件(随后的鼠标悬停)正在通过管道下降？

目前我在每次触发事件时设置一个变量，然后 1ms 超时循环检查该变量，然后触发需要在 mouseover/mouseut 上发生的其他操作，但我不喜欢它。

Answer 1

您需要 mouseenter 和 mouseleave 事件，而不是 mouseover 和 mouseout。

mouseover 和 mouseout 事件在任何子元素获得或失去鼠标时触发。 mouseenter 和 mouseleave 事件仅在处理该事件的元素首次进入或完全离开时触发。

Here's some more info关于区别

var root = document.querySelector("#a");
var msg_stack = document.querySelector("#msg_stack");
var last_msg = document.querySelector("#dummy");

function pad(v) {
  v = "" + v;
  while (v.length < 3) v = "0" + v;
  return v;
}

function hover(v) {
  var msg = document.createElement("div");
  msg.innerText = pad(msg_stack.children.length) + ": " + v;
  
  last_msg = msg_stack.insertBefore(msg, last_msg);
}

root.addEventListener("mouseenter", function() { hover(true); });
root.addEventListener("mouseleave", function() { hover(false); });

#a {
  position:absolute;
  left:10px;top:10px;width:200px;height:50px;
  background-color:red;
}

#b {
  position:absolute;
  right:0px;top:0px;width:50px;height:200px;
  background-color:red;
}

#b:after {
  content:"";
  position:absolute;
  left:0;top:0;height:50px;
  border-left:solid 1px blue;
}

#msg_stack {
  position:absolute;
  left:230px;top:10px;width:500px;height:200px;
}

<div id="a"><div id="b"></div></div>
<div id="msg_stack"><div id="dummy"></div></div>