如何解决HTML页面展示鼠标XY坐标时元素滑动偏移的问题

问题原因 #

• 核心偏移原因：外层div使用justify-content: space-around做水平布局，当坐标数值位数变化（比如从100涨到1000）时，

  标签的实际宽度会动态变化，flex布局会重新计算两个

  标签的分布间距，直接导致两个坐标元素左右滑动偏移。

• JS代码不完整：仅监听更新了X坐标的展示，没有同步更新Y坐标的数值。
• CSS选择器错误：span *选择的是span标签的所有子元素，而你的坐标值是直接作为span的文本节点存在，没有子元素，所以你写的span相关样式完全没有生效。
• 坐标值没有设置固定展示宽度，数值位数变化时会撑开父元素宽度，是触发flex重新布局的直接诱因。

修复方案 #

1. 给坐标展示的span设置固定宽度、右对齐，保证无论数值位数多少，span占用的宽度固定，不会撑开父元素。
2. 调整外层flex布局的对齐规则，同时固定两个

   标签的宽度，避免动态计算间距。

3. 补全Y坐标的更新逻辑。

修改后JS代码

window.addEventListener("mousemove", e =>{
    document.getElementById("x-value").textContent = e.clientX;
    document.getElementById("y-value").textContent = e.clientY;
})

这里更推荐用clientX/clientY代替e.x，兼容性更好，取值逻辑一致，都是相对于视口的坐标

修改后CSS代码

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
p{
  margin:0 5px;
  padding: 0;
  width: 80px;
}
span{
  display: inline-block;
  width: 50px;
  text-align: right;
}
div{
  width: 500px;  
  display: flex;
  flex-direction: row;
  justify-content: center;
}

HTML代码无需修改，保持原有结构即可。

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