使 onmouseover 改变容器和嵌套元素的 innerHTML 内容

Question

请查看此 jsBin http://jsbin.com/jimenohare/2/edit?html,output。我的目标是使用其他 div 上的 onmouseover 事件更新 status div 的 innerHTML。问题是，"status" div 始终显示我正在悬停在 body div 上，即使我将鼠标悬停在嵌套在其中的其他 div 上也是如此body div。我怎样才能让它识别出我在 body div 内悬停在 child div 上，而不总是显示 onmouseover 事件 body div?希望这是有道理的。

<body id = "body" onmouseover = "statusSet( this )">
  <script>
    sets = [];//sets 000 - 999
    x = 0; y = 0; z = -1;
    for( var i = 0; i < 220; i++ ){
        z++;
        if( y == 9 ){
            x++; y = x - 1;
        }
        if( z == 10 ){
            y++; z = y;
        }
        sets.push( x + '' + y + '' + z );
    }
  </script>

  <div id = "sets">
    <script>
      var table = document.createElement( 'table' ), tr, td, row, cell;
      for( row = 0; row < 10; row++ ){
        tr = document.createElement( 'tr' );
        for( cell = 0; cell < 22; cell++ ){
          td = document.createElement( 'td' );
          tr.appendChild( td );
          td.id = 'n' + parseInt( row * 22 + cell );
          td.setAttribute( 'onmouseover', 'statusSet( this )' );
        }
        table.appendChild( tr );
      }
      document.getElementById( 'sets' ).appendChild( table );

      for( var i = 0; i < 220; i++ ){
        document.getElementById( 'n' + i ).innerHTML = sets[ i ];
        document.getElementById( 'n' + i ).id = 's' + sets[ i ];
      }
    </script>
  </div>

  <p id = "status">status bar</p>

  <script>
    function statusSet( element ){
      var elementId = element.id;
      var elementInner = document.getElementById( elementId ).innerHTML;

      if( elementId == 'body' ){
        document.getElementById( 'status' ).innerHTML = 'body';
      }
      else if( document.getElementById( elementId )
      .parentElement.parentElement.parentElement.id == 'sets' ){
        document.getElementById( 'status' ).innerHTML = 'SET ' +   
        elementInner;
      }
      else{
        document.getElementById( 'status' ).innerHTML =   
        elementId.toUpperCase();
      }
    }
  </script>

</body>

Answer 1

我会监听主体上的鼠标悬停事件，并将事件目标传递给您的状态设置函数：

document.body.addEventListener('mouseover', function(e){
  statusSet(e.target);
});

这是其工作原理的细分。

当您将鼠标移到主体的任何元素上时，例如 <td>，mouseover 事件会在该元素及其每个祖先元素上触发，包括 <body>。原始 <td> 传递给 .target 属性

中的每个事件处理程序

使 onmouseover 改变容器和嵌套元素的 innerHTML 内容

make onmouseover change innerHTML content for containers AND nested elements

javascript

innerhtml

onmouseover