mouseover和mouseenter的区别

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

fifi家

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

阅读量176

点赞数

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

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

版权

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

10 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中mouseenter和mouseover事件的区别。mouseenter事件仅在鼠标进入元素本身时触发，而mouseover不仅在进入父元素时触发，还会因经过子元素而连续触发。这种区别在处理元素交互时显得尤为重要，特别是当需要精确控制事件触发时机时。示例代码展示了在一个粉红色父亲元素内有一个紫色儿子元素的情况下，仅使用mouseenter监听事件的效果。

摘要由CSDN通过智能技术生成

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;
复制链接

扫一扫