JS中關(guān)于mouseover和mouseout冒泡的問題

代碼如下：

<!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觸發(fā)了' + i)
      }
      box1.onmouseout = function () {
        i-=2
        console.log('onmouseout' + i)
      }
      box3.onmouseenter = function () {
        j++
        console.log('onmouseenter觸發(fā)了' + j)
      }
      box3.onmouseleave = function () {
        j-=2
        console.log('onmouseleave' + j)
      }
    }
</script>
</body>       
</html>

我的操作都是先移入紅色的子盒子，然后移出子盒子，最后移出藍(lán)色大盒子，運(yùn)行截圖如下：

我想知道的是倒數(shù)第二行為什么會觸發(fā)mouseover，也就是鼠標(biāo)從BOX2移出的一瞬間，先是冒泡mouseout可以理解，但同時(shí)輸出的mouseover就不知道為什么了。有沒有大神解釋一下呢？

回答

編輯回答

安于心

box1和box2交線部分，比較特殊，因?yàn)閎ox2是覆蓋在box1上的，所以一經(jīng)過交線部分，肯定會觸發(fā)onmouseout，但因?yàn)閎ox2是在box1上又觸發(fā)了onmouseover。
為了解決這樣的問題，所以引入了onmouseenter和onmouseleave，它在過交線的時(shí)候就不會觸發(fā)，只有是在范圍內(nèi)都不會有多余的觸發(fā)了。

2018年7月6日 08:39

編輯回答