mouseenter 和 mouseover 的区别

最新推荐文章于 2023-11-21 08:47:56 发布

清晨投递

最新推荐文章于 2023-11-21 08:47:56 发布

阅读量314

点赞数

分类专栏： javaScript 文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_51244384/article/details/122523287

版权

javaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

当鼠标移动到元素上时就会触发mouseenter事件，类似于mouseover。

两者的区别：

mouseover：

（1）鼠标经过自身盒子会触发，经过子盒子还会触发。

mouseenter：

（1）经过自身盒子才会触发。

之所以这样，是因为mouseenter不会冒泡。

跟mouseenter搭配鼠标离开mouseleave同样不会冒泡。

<body>

  <div class="div">
    <div class="con">

    </div>
  </div>

  <script>
    var div = document.querySelector('.div');
    var con = document.querySelector('.con');

    // mouseover 和 mouseenter 的区别
    // 当碰到内部盒子时,也会触发
    div.onmouseover = function () {
      console.log('over');
    }
    // mouseout鼠标离开也会冒泡
    div.onmouseout = function () {
      console.log('out');
    }
    //当碰到内部盒子时,不会触发
    div.onmouseenter = function () {
      console.log('enter');
    }
    // mouseleave 鼠标离开不会冒泡
    div.onmouseleave = function () {
      console.log('leave');
    }
  </script>
</body>

清晨投递

关注

0
点赞
踩
1

收藏

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

当鼠标移动到元素上时就会触发mouseenter事件，类似于mouseover。两者的区别：mouseover：（1）鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter：（1）经过自身盒子才会触发。之所以这样，是因为mouseenter不会冒泡。跟mouseenter搭配鼠标离开mouseleave同样不会冒泡。...
复制链接

扫一扫