鼠标在<div>内部元素间移动时触发多余mouseover事件的问题

你遇到的问题根源在于mouseover事件会冒泡：当鼠标在div内部的h1、h2等子元素之间移动时，会触发子元素的mouseover事件并冒泡到父div，导致绑定的回调重复执行。而你需要的是仅当鼠标首次进入div区域时执行操作，内部元素间移动不触发。

解决方案 #

用mouseenter事件替代mouseover，同时用mouseleave替代mouseout。这两个事件不会冒泡，只有当鼠标从元素外部进入/完全离开元素本身时才会触发，内部子元素间的移动不会触发这些事件，正好匹配你的需求。

修改后的代码 #

JavaScript #

// 获取HTML元素引用
var divElement = document.getElementById("myDiv");
var h1Element = divElement.querySelector("h1");
var addedCharacter = false;

// 仅当鼠标从外部进入div时触发
divElement.addEventListener("mouseenter", function() {
  if (!addedCharacter) {
    // 给H1标题添加"1"字符
    h1Element.textContent += "1";
    addedCharacter = true;
  }
});

// 仅当鼠标完全离开div时触发
divElement.addEventListener("mouseleave", function() {
  addedCharacter = false;
});

CSS #

/* 为div和标题添加样式 */
div {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  text-align: center;
  cursor: pointer;
}

h1,
h2,
h3 {
  margin: 10px 0;
}

HTML #

<div id="myDiv">
  <h1>Text 1</h1>
  <h2>Text 2</h2>
  <h3>Text 3</h3>
</div>

修改后效果：只有鼠标第一次从div外部进入时，才会给h1添加"1"；在div内部的h1、h2之间移动时不会触发任何事件；当鼠标完全离开div区域后，addedCharacter会被重置，下次进入div时会再次执行添加操作。

内容的提问来源于stack exchange，提问作者galczys