当前位置：首页 > news >正文

vue 鼠标移入移出事件执行多次(尤其ie)

news 来源：原创 2025/5/14 22:45:16

mouseover 当一个定点设备（通常指鼠标）在一个元素本身或者其子元素上移动时，mouseover 事件在该元素上触发。
mouseenter 事件在定点设备（通常指鼠标）首次移动到元素的激活区域内时，在该元素上触发。
mouseenter尽管与 mouseover 类似，但是 mouseenter 的不同之处在于当鼠标指针从它后代的物理空间移动到它自己的物理空间时，它不会冒泡，也不会发送给它的任何后代。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="test">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
<script>
  const test = document.getElementById("test");

// 当光标移到无序列表上时，此处理函数将仅执行一次
// test.addEventListener(
//   "mouseenter",
//   (event) => {
//     // 突出显示鼠标悬停目标
//     event.target.style.color = "purple";

//     // 短暂延迟后重置颜色
//     setTimeout(() => {
//       event.target.style.color = "";
//     }, 500);
//   },
//   false,
// );

// 每次将光标移动到不同的列表项上时，此处理函数都会执行
test.addEventListener(
  "mouseover",
  (event) => {
    // 突出显示鼠标悬停目标
    event.target.style.color = "orange";

    // 短暂延迟后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

</script>  
</body>
</html>