【菜狗学前端】鼠标移出：mouseleave 和 mouseout 区别（通俗易懂版）

佛系菜狗

已于 2024-04-14 19:40:50 修改

阅读量402

点赞数 6

文章标签： javascript 前端开发语言 html css

于 2024-03-21 15:06:28 首次发布

本文链接：https://blog.csdn.net/m0_58355897/article/details/136902993

版权

最近学到了事件，感觉鼠标移出事件的mouseleave和mouseout区别有点难懂，查资料又觉得似乎都不够形象直白，于是浅写一下希望能帮助到和我一样有疑惑的伙伴。

首先先上结论：两者的不同在于 mouseleave不会冒泡而 mouseout会冒泡。

事件冒泡：从内到外事件由子级向父级传播

通俗讲，mouseleave只care自己，mouseout还care子代（无论进还是出）。

疑惑的点等待继续学习钻研——为什么移入子代节点也会触发父亲节点的mouseout事件？？？

还是不太理解？OK，下面直接上代码看例子。

一、例子概述：

一个红父盒子里有一个蓝子盒子
给父盒子同时绑定了mouseleave变黄和 mouseout变白事件
触发对应事件：父盒子背景色改变+console.log打印该事件名

二、运行结果：

鼠标移出：mouseleave 和 mouseout 区别

三、结果分析：

鼠标仅移出父盒子自身时，才会触发父盒子的mouseleave事件

而鼠标移出/移入子盒子 / 移出父盒子时，都会触发父盒子的mouseout事件

且移出父盒子时，先执行mouseout事件后执行mouseleave事件（所以效果是变黄）

PS：再仔细看看-鼠标移出/移入子盒子时触发父盒子的mouseout事件结果

mouseout

四、代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*父亲盒子样式--红色*/
        .fa {
            background-color: red;
            width: 300px;
            height: 300px;
        }
        /*孩子盒子样式--蓝色*/
        .son {
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 父亲盒子 -->
    <div class="fa" >
        <!-- 孩子盒子 -->
        <div class="son"></div>
    </div>

    <script>
        //获取父子元素节点
        var fa = document.querySelector(".fa")
        var son=document.querySelector(".son")

        //父亲盒子绑定onmouseleave事件--变黄色
        fa.onmouseleave= function () {
            fa.style.backgroundColor = "yellow";
            console.log("fa.onmouseleave");
        }

        //父亲盒子绑定onmouseout事件--变白色
        fa.onmouseout= function () {
            fa.style.backgroundColor = "white";
            console.log("fa.onmouseout");
        }

    </script>
</body>
</html>

佛系菜狗

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【菜狗学前端】鼠标移出：mouseleave 和 mouseout 区别（通俗易懂版）

最近学到了事件，感觉鼠标移出事件的mouseleave和mouseout区别有点难懂，查资料又觉得似乎都不够形象直白，于是浅写一下希望能帮助到和我一样有疑惑的伙伴。
复制链接

扫一扫