使 onmouseover 改变容器和嵌套元素的 innerHTML 内容
make onmouseover change innerHTML content for containers AND nested elements
请查看此 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>
我会监听主体上的鼠标悬停事件,并将事件目标传递给您的状态设置函数:
document.body.addEventListener('mouseover', function(e){
statusSet(e.target);
});
这是其工作原理的细分。
当您将鼠标移到主体的任何元素上时,例如 <td>
,mouseover
事件会在该元素及其每个祖先元素上触发,包括 <body>
。原始 <td>
传递给 .target
属性
中的每个事件处理程序
请查看此 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>
我会监听主体上的鼠标悬停事件,并将事件目标传递给您的状态设置函数:
document.body.addEventListener('mouseover', function(e){
statusSet(e.target);
});
这是其工作原理的细分。
当您将鼠标移到主体的任何元素上时,例如 <td>
,mouseover
事件会在该元素及其每个祖先元素上触发,包括 <body>
。原始 <td>
传递给 .target
属性