为什么onmouseover和onmouseout有这种现象呢?
为什么鼠标从父盒子移入子盒子也会触发onmouseout
然后鼠标从子盒子移到父盒子也会触发onmouseover呢?
冒泡
给子盒子添加事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 200px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
<script type="text/javascript">
var parentEle = document.querySelector(".parent");
var childEle = document.querySelector(".child");
parentEle.addEventListener("mouseenter", function() {
console.log("进入了fu盒子");
}, false);
parentEle.addEventListener("mouseleave", function() {
console.log("离开了fu盒子");
}, false);
childEle.addEventListener("mouseenter", function() {
console.log("进入了zi盒子");
}, true);
childEle.addEventListener("mouseleave", function() {
console.log("离开了zi盒子");
}, true);
</script>
</body>
</html>
首先跟冒泡关系不大：
mouseenter，滑到父节点只会触发一下，以后只要鼠标在节点内移动，都不会再触发这个事件
mouseover，滑到父节点会触发，以后再节点内移动也会触发。
两个事件
我猜你是想移动到父节点后，父节点不触发，那就使用 mouseenter
如果对您有帮助，请你点赞 + 采纳，这是对我最大的鼓励