mouseover 和 mouseenter的区别

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

101茂茂

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

阅读量7.4k

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/weixin_64691270/article/details/123980027

版权

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout

mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

mouseover和mouseenter的异同体现在两个方面：

1. 是否支持冒泡

2.事件的触发时机

运行下面的代码，我们可以直观的发现两者的区别：

<!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>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .father {
        /* margin: 100px auto; */
        width: 500px;
        height: 500px;
        background-color: pink;
      }

      .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        /* transform: translateX(-50px); */
      }
    </style>
  </head>

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

    <script>
      let father = document.querySelector('.father')
      let son = document.querySelector('.son')
      // 事件捕获
      // mouseenter——不支持事件冒泡
      father.addEventListener('mouseenter', function() {
        console.log('father-mouseenter')
      })

      son.addEventListener('mouseenter', function(e) {
        // e.stopPropagation()
        console.log('son-mouseenter')
      })

      // mouseleave——支持事件冒泡
      // father.addEventListener('mouseleave', function() {
      //   console.log('father-mouseleave')
      // })

      // son.addEventListener('mouseleave', function(e) {
      //   // e.stopPropagation()
      //   console.log('son-mouseleave')
      // })
    </script>
  </body>
</html>

mouseenter事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。

mouseover事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。如果移到父元素里面的子元素，事件也会被触发

所以我们在使用鼠标经过事件一般会使用

mouseenter 和 mouseleave 没有冒泡效果(推荐)

而mouseover 和 mouseout 会有冒泡效果

以上希望可以对你有所帮助！！！

101茂茂

关注

8
点赞
踩
22

收藏

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

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseoutmouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleavemouseover和mouseenter的异同体现在两个方面：1. 是否支持冒泡2.事件的触发时机运行下面的代码，我们可以直观的发现两者的区别：<!DOCTYPE html><html lang="en"> &
复制链接

扫一扫