Chrome更新后body设置CSS zoom时点击事件坐标计算的兼容性确认

我完全理解你的顾虑——仅凭直觉修改代码却没有官方文档支撑，确实让人心里没底。我可以帮你证实这个Chrome的行为变化，同时给你一个能兼容新旧版本的解决方案。

首先，你的猜想是正确的：Chrome在90版本之后（你提到的94版本已存在此现象），确实调整了zoom属性下鼠标事件坐标的返回逻辑。

行为变化详情 #

• 在旧版本Chrome中，当给body设置zoom样式时，event.clientX/Y返回的是未缩放的原始页面坐标，所以需要通过coordX = event.clientX / zoom来补偿，才能得到元素实际显示位置的坐标。
• 而在新版本Chrome中，浏览器会自动将鼠标事件的坐标转换为缩放后的实际位置，也就是已经考虑了zoom的影响，此时再用之前的补偿代码，反而会导致坐标出现偏差。

为什么找不到官方文档？ #

这个调整主要是Chromium内核对事件坐标准确性的修复，相关记录更多出现在Chromium的bug跟踪系统和提交记录中，并没有专门在Chrome官方开发者文档中做显眼的说明，这也是你找不到直接文档的原因。

兼容新旧版本的解决方案 #

为了同时适配新旧Chrome版本，我们可以在代码中动态判断当前浏览器是否需要坐标补偿，而不是硬编码逻辑。下面是一个可行的实现：

function getCorrectedClickCoords(event) {
  // 获取当前body的zoom值，默认1（无缩放）
  const bodyZoom = parseFloat(getComputedStyle(document.body).zoom) || 1;
  if (bodyZoom === 1) {
    // 无缩放时直接返回原始坐标
    return {
      x: event.clientX - document.body.getBoundingClientRect().left,
      y: event.clientY - document.body.getBoundingClientRect().top
    };
  }

  // 创建临时测试元素，判断浏览器是否自动适配了zoom坐标
  const testMarker = document.createElement('div');
  testMarker.style.cssText = 'position: absolute; left: 100px; top: 100px; width: 1px; height: 1px;';
  document.body.appendChild(testMarker);
  
  const markerRect = testMarker.getBoundingClientRect();
  const bodyRect = document.body.getBoundingClientRect();
  document.body.removeChild(testMarker);

  // 计算预期的未补偿位置：如果浏览器没适配zoom，marker的视口left应该是body.left + 100*zoom
  // 如果浏览器已适配，marker的视口left应该等于body.left + 100
  const expectedLeftForNoCompensation = bodyRect.left + 100;
  const needsCompensation = Math.abs(markerRect.left - expectedLeftForNoCompensation) > 1;

  const rawX = event.clientX - bodyRect.left;
  const rawY = event.clientY - bodyRect.top;

  return {
    x: needsCompensation ? rawX / bodyZoom : rawX,
    y: needsCompensation ? rawY / bodyZoom : rawY
  };
}

// 使用示例
document.addEventListener('click', (e) => {
  const coords = getCorrectedClickCoords(e);
  console.log('修正后的点击坐标：', coords.x, coords.y);
});

这个函数的核心逻辑是通过临时测试元素，判断当前浏览器对zoom下坐标的处理方式，自动决定是否需要执行补偿计算，从而兼容新旧版本的Chrome。

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