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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    总结
    mouseenter和mouseleave配合使用
    mouseover和mouseout配合使用

  • 相关阅读:
    分布式中的CAP原理
    01-linux基础-操作系统的学习
    MySQL的特性
    maven内置变量对应的目录
    谷粒学院 —— 10、课程管理：整合阿里云视频点播
    定位问题6.27 petal数据接口问题
    JUC并发编程——CAS与原子引用（基于狂神说的学习笔记）
    基于微信小程序的校园外卖点餐系统
    医疗服务全面升级，这个方法绝了！
    C++ 构造函数，拷贝构造
  • 原文地址：https://blog.csdn.net/weixin_30980795/article/details/116661757