JS中关于mouseover和mouseout冒泡的问题_JavaScript_论坛

JS中关于mouseover和mouseout冒泡的问题

gu***di 分类：JavaScript 人气：993 回帖：3 发布于6年前收藏

代码如下：

<!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就不知道为什么了。有没有大神解释一下呢？

标签：javascript

讨论这个帖子（3）垃圾回帖将一律封号处理……

Lv1 新人

qi***hu 职业无 6年前#1

那也不是冒泡啊,那就是从2到1的mouseout事件,
你给的代码里也没有box2的事件绑定啊.

Lv1 新人

Al***ay 职业无 6年前#2

触发mouseover是因为移出了内部小div进入外面大div的区域，你可以console.log(e.targrt)看一下，这时的target是外面的大div,紧跟着前面的mouseout的target是里面的小div

Lv6 码匠

黄***得其它 6年前#3

box1和box2交线部分，比较特殊，因为box2是覆盖在box1上的，所以一经过交线部分，肯定会触发onmouseout，但因为box2是在box1上又触发了onmouseover。
为了解决这样的问题，所以引入了onmouseenter和onmouseleave，它在过交线的时候就不会触发，只有是在范围内都不会有多余的触发了。

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取