如何实现仅在鼠标悬停黄色矩形时显示跟随光标坐标？

核心问题是原代码给body绑定了全局鼠标移动事件，导致页面任意位置都会触发坐标显示。要实现仅在黄色矩形上显示坐标，按以下方式修改即可：

核心调整说明 #

1. 移除body上的全局onmousemove事件，避免全局触发
2. 修正JS中事件对象的混用问题，统一使用函数传入的事件参数
3. 给坐标提示框添加事件穿透样式，防止它遮挡黄色矩形导致意外触发mouseout

修改后的完整代码 #

JavaScript #

function showCoords(e) {
  // 统一使用传入的事件对象e，避免依赖全局event
  var x = e.clientX;
  var y = e.clientY;
  var coor = "(" + x + ", " + y + ")";
  var bx = document.getElementById("box");
  bx.innerHTML = coor;
  // 补充px单位，确保样式在所有浏览器正常生效
  bx.style.left = e.pageX - 50 + "px";
  bx.style.top = e.pageY + 20 + "px";
}

function clearCoords() {
  document.getElementById("box").innerHTML = "";
}

CSS #

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;
}

#box {
  width: 100px;
  height: 30px;
  position: absolute;
  /* 添加事件穿透，鼠标移到提示框上时，事件会传递给下方的黄色矩形 */
  pointer-events: none;
}

HTML #

<body>
  <div class="relative">
    <div class="abs" onmousemove="showCoords(event)" onmouseout="clearCoords()"></div>
  </div>
  <div id="box"></div>
</body>

关键细节解释 #

• pointer-events: none：让坐标提示框不拦截鼠标事件，确保鼠标在提示框上时，依然判定为悬停在黄色矩形上，不会误触发清除操作
• 补充px单位：原代码设置位置时未加单位，部分浏览器无法正确解析样式，补充后兼容性更好
• 统一事件对象：使用函数参数e替代全局event，符合标准JS写法，避免浏览器兼容性问题

内容的提问来源于stack exchange，提问作者Eddy Sorngard