以下代码始终显示光标下方的光标坐标：
function showCoords(e) {
var x = event.clientX;
var y = event.clientY;
var coor = "(" + x + ", " + y + ")";
document.getElementById("box").innerHTML = coor;
var bx = document.getElementById("box");
bx.style.left = e.pageX - 50;
bx.style.top = e.pageY + 20;
}
function clearCoords() {
document.getElementById("box").innerHTML = "";
}div.relative {
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
}
div.abs {
position: absolute;
top: 100px;
right: 50px;
width: 200px;
height: 100px;
background-color: yellow;
}<body onmousemove="showCoords(event)">
<div class="relative">
<div class="abs" onmousemove="showCoords(event)" onmouseout="clearCoords()"></div>
</div>
<div id="box" style="width:100px; height:30px; position:absolute"></div>
</body>我只希望当鼠标指针悬停在黄色矩形上时，坐标是可见的。如果将<body onmousemove="showCoords(event)">更改为<body>，则坐标永远不可见。如何使坐标仅在悬停在黄色矩形上时可见？
将onmousemove侦听器从主体移动到要侦听的元素-在本例中为div.abs。
我建议不要使用onmousemove属性，而应该使用完全javascript的解决方案——只是为了将javascript-y的东西放在一起。类似(未经测试的(
var listenOn = document.querySelector(".abs");
listenOn.addEventListener("mousemove", ShowCoords);