请看这个jsBin http://jsbin.com/jimenohare/2/edit?html,output 。我的目标是使用其他 div 上的 onmouseover 事件更新 status div 的innerHTML。问题是，“状态”div 始终显示我悬停在 body div 上，即使我将鼠标悬停在嵌套在 body div 内的其他 div 上也是如此。我怎样才能做到这一点，以便它识别出我将鼠标悬停在主体 div 内的子 div 上，而不总是显示主体 div 的 onmouseover 事件？希望这是有道理的。
<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>
最佳答案
我会监听主体上的鼠标悬停事件，并将事件目标传递给您的状态设置函数:
document.body.addEventListener('mouseover', function(e){
statusSet(e.target);
});
以下是其工作原理的详细说明。
当您将鼠标移到正文中的任何元素上时，例如 <td> ，mouseover事件在该元素及其每个祖先上触发，包括 <body> 。始发<td>被传递到 .target 中的每个事件处理程序属性(property)
关于javascript - 让 onmouseover 更改容器和嵌套元素的innerHTML内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27770757/