mouseenter和mouseover的区别

Tutorial: DOM实战 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0

mouseenter 和 mouseover 的区别

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .father {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin: 100px auto;
      }

      .son {
        width: 200px;
        height: 200px;
        background-color: purple;
      }
    </style>
  </head>

  <body>
    <div class="father">
      <div class="son"></div>
    </div>

    <script>
      var father = document.querySelector(".father");
      var son = document.querySelector(".son");

      // mouseover 鼠标经过自身盒子会触发, 经过子盒子还会触发,
      // mouseenter 只会在经过自身触发

      // father.addEventListener("mouseover", function () {
      father.addEventListener("mouseenter", function () {
        console.log(11);
      });
    </script>
  </body>
</html>
Prev: 仿淘宝固定侧边栏 Next: 动画原理