鍍金池/ 問答/HTML/ JS中關(guān)于mouseover和mouseout冒泡的問題

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>

我的操作都是先移入紅色的子盒子，然后移出子盒子，最后移出藍色大盒子，運行截圖如下：

clipboard.png

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

回答
編輯回答
安于心

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

2018年7月6日 08:39
編輯回答
淡墨

觸發(fā)mouseover是因為移出了內(nèi)部小div進入外面大div的區(qū)域，你可以console.log(e.targrt)看一下，這時的target是外面的大div,緊跟著前面的mouseout的target是里面的小div

2018年7月21日 06:39
編輯回答
萌面人

那也不是冒泡啊,那就是從2到1的mouseout事件,
你給的代碼里也沒有box2的事件綁定啊.

2017年2月14日 23:10