【菜狗学前端】鼠标移出：mouseleave 和 mouseout 区别（通俗易懂版）
佛系菜狗 2024-07-26 16:03:02 阅读 85
最近学到了事件，感觉鼠标移出事件的mouseleave和mouseout区别有点难懂，查资料又觉得似乎都不够形象直白，于是浅写一下希望能帮助到和我一样有疑惑的伙伴。
首先先上结论：两者的不同在于 <code>mouseleave不会冒泡而 mouseout会冒泡。
事件冒泡：从内到外 事件由子级向父级传播
通俗讲，mouseleave只care自己，mouseout还care子代（无论进还是出）。
疑惑的点等待继续学习钻研——为什么移入子代节点也会触发父亲节点的mouseout事件？？？
还是不太理解？OK，下面直接上代码看例子。
一、例子概述：
一个红父盒子里有一个蓝子盒子
给父盒子同时绑定了mouseleave变黄和 mouseout变白事件
触发对应事件：父盒子背景色改变+console.log打印该事件名
二、运行结果：
鼠标移出：mouseleave 和 mouseout 区别
三、结果分析：
鼠标仅移出父盒子自身时，才会触发父盒子的mouseleave事件
而鼠标移出/移入子盒子 / 移出父盒子时，都会触发父盒子的mouseout事件
且移出父盒子时，先执行mouseout事件后执行mouseleave事件（所以效果是变黄）
PS：再仔细看看-鼠标移出/移入子盒子时触发父盒子的mouseout事件结果
mouseout
四、代码：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<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" >code>
<!-- 孩子盒子 -->
<div class="son"></div>code>
</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>
上一篇： vscod:无法读取 chrome-error://chromewebdata/ 的源映射: Unexpected 503 response from chrome-error://chromeweb
下一篇： web输入框涉及安全测试和功能测试点
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。