极客观点
项目管理
HarmonyOS
代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 200px;
height: 200px;
background-color: #2aabd2;
font: bold 28px 微软雅黑;
color: #fff;
margin: 50px auto;
}
#box2{
width: 100px;
height: 100px;
background-color: lightcoral;
}
#box3{
width: 200px;
height: 200px;
background-color: #2aabd2;
font: bold 28px 微软雅黑;
color: #fff;
margin: 50px auto;
}
#box4{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">BOX2</div>
BOX1
</div>
<div id="box3">
<div id="box4">BOX4</div>
BOX3
</div>
<script type="text/javascript">
window.onload = function () {
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
var box4 = document.getElementById('box4')
var i = 0, j = 0
box1.onmouseover = function () {
i++
console.log('onmouseover触发了' + i)
}
box1.onmouseout = function () {
i-=2
console.log('onmouseout' + i)
}
box3.onmouseenter = function () {
j++
console.log('onmouseenter触发了' + j)
}
box3.onmouseleave = function () {
j-=2
console.log('onmouseleave' + j)
}
}
</script>
</body>
</html>我的操作都是先移入红色的子盒子，然后移出子盒子，最后移出蓝色大盒子，运行截图如下：
我想知道的是倒数第二行为什么会触发mouseover，也就是鼠标从BOX2移出的一瞬间，先是冒泡mouseout可以理解，但同时输出的mouseover就不知道为什么了。有没有大神解释一下呢？
触发mouseover是因为移出了内部小div进入外面大div的区域，你可以console.log(e.targrt)看一下，这时的target是外面的大div,紧跟着前面的mouseout的target是里面的小div