如何获取MouseEvent的亚像素级pageX/Y与clientX/Y精确坐标？

关键事实 #

在Chrome和Firefox中：

• event.pageX/Y 和 event.clientX/Y 都是真实亚像素坐标经过四舍五入后的整数，没有哪一组是精确值
• window.scrollX/Y 会保留亚像素精度（尤其是页面滚动且浏览器缩放比例非整数倍时），这直接导致了pageX/Y、clientX/Y与scrollX/Y的数学关系出现误差

方案对比与推荐 #

针对Y轴的三种估算方案，实际效果如下：

方案一：基于page坐标推导client坐标 #

const accurate_pageY = event.pageY;
const accurate_clientY = event.pageY - window.scrollY;
// 忽略event.clientY

这种方案完全信任event.pageY的取整结果，放弃event.clientY的信息。但因为event.pageY本身就有±0.5px的误差，最终计算出的accurate_clientY误差也会维持在±0.5px左右。

方案二：基于client坐标推导page坐标 #

const accurate_pageY = event.clientY + window.scrollY;
const accurate_clientY = event.clientY;
// 忽略event.pageY

和方案一逻辑相反，完全信任event.clientY的取整结果，误差同样最多可达±0.5px。

方案三：取两组推导结果的平均值 #

const accurate_pageY = (event.pageY + (event.clientY + window.scrollY)) / 2;
const accurate_clientY = ((event.pageY - window.scrollY) + event.clientY) / 2;

这个方案利用了两组取整结果的误差独立性——event.pageY是真实page坐标的取整，event.clientY是真实client坐标的取整，而真实page坐标=真实client坐标+scrollY。通过平均两组推导值，能抵消部分随机误差，将最大误差缩小到±0.25px左右，是三个方案中亚像素精度最高的选择。

总结 #

浏览器并未直接提供鼠标事件的真实亚像素坐标，所有方案都是基于现有信息的估算。如果要实现最流畅的交互响应，方案三是当前最优的选择。

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