mouseover和mouseenter的区别

最新推荐文章于 2023-01-10 14:49:10 发布

fifi家

最新推荐文章于 2023-01-10 14:49:10 发布

阅读量171

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_51010474/article/details/124638708

版权

JavaScript学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

mouseover：鼠标经过自身盒子会触发，经过子盒子还会触发

mouseenter：只会在鼠标经过自身盒子才会触发跟 mouseleave 鼠标离开搭配

原理：mouseenter与mouseleave不会冒泡，mouseover会冒泡

  <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");
      father.addEventListener("mouseenter", function () {
        console.log(11);
      });
      // father.addEventListener("mouseover", function () {
      //   console.log(11);
      // });
    </script>
  </body>
</html>

fifi家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mouseover和mouseenter的区别

mouseover：鼠标经过自身盒子会触发，经过子盒子还会触发mouseenter：只会在鼠标经过自身盒子才会触发跟 mouseleave 鼠标离开搭配原理：mouseenter与mouseleave不会冒泡，mouseover会冒泡 <head> <style> .father { width: 300px; height: 300px; background-color: pink;
复制链接

扫一扫