CSS zoom属性导致事件坐标偏移的解决方案求助

方案1：事件捕获阶段修正坐标值 #

• 利用事件捕获机制，在#custom-container上提前拦截事件，修正pageX/pageY为真实坐标，让THS库拿到正确值：

  const customContainer = document.getElementById('custom-container');
  const mainContainer = document.getElementById('main-container');
  
  // 实时获取父容器的zoom值
  function getZoomRatio() {
    return parseFloat(getComputedStyle(mainContainer).zoom) || 1;
  }
  
  // 监听所有需要坐标的事件类型
  const targetEvents = ['click', 'mousemove', 'mouseover', 'mouseout', 'mousedown', 'mouseup'];
  targetEvents.forEach(eventType => {
    customContainer.addEventListener(eventType, (e) => {
      const zoom = getZoomRatio();
      // 重写事件对象的坐标属性
      Object.defineProperty(e, 'pageX', { value: e.pageX / zoom });
      Object.defineProperty(e, 'pageY', { value: e.pageY / zoom });
    }, true); // 捕获阶段触发，确保优先于THS的事件处理
  });
  
  // 定时检测zoom变化，防止轮询更新后修正失效
  setInterval(() => {
    // 可以在这里更新全局的zoom缓存值，优化性能
  }, 500);
  

方案2：反向缩放抵消父级zoom影响 #

• 给#custom-container设置反向的transform: scale()，抵消父级zoom的缩放，同时调整容器尺寸避免布局偏移：

  #custom-container {
    transform-origin: top left;
    /* 初始值可根据父级默认zoom设置，后续JS动态更新 */
    transform: scale(1);
  }
  

• 配合MutationObserver监听父容器的zoom变化，实时更新反向缩放值：

  const mainContainer = document.getElementById('main-container');
  const customContainer = document.getElementById('custom-container');
  
  const zoomObserver = new MutationObserver(() => {
    const currentZoom = parseFloat(getComputedStyle(mainContainer).zoom) || 1;
    const reverseScale = 1 / currentZoom;
    customContainer.style.transform = `scale(${reverseScale})`;
    customContainer.style.width = `calc(100% / ${reverseScale})`;
    customContainer.style.height = `calc(100% / ${reverseScale})`;
  });
  
  // 监听父容器的style属性变化（zoom通过style设置）
  zoomObserver.observe(mainContainer, { attributes: true, attributeFilter: ['style'] });
  

• 原理：transform的缩放会被浏览器事件系统自动修正坐标，而zoom不会，反向缩放后视觉上恢复正常，同时THS获取的坐标会自动适配。

方案3：封装事件绑定方法修正坐标 #

• 覆盖全局的addEventListener方法，对#custom-container内的事件做坐标修正后再传递给THS：

  const originalAddEventListener = EventTarget.prototype.addEventListener;
  const mainContainer = document.getElementById('main-container');
  
  EventTarget.prototype.addEventListener = function(type, handler, options) {
    // 只处理自定义容器内的目标事件
    if (this.closest('#custom-container') && ['click', 'mousemove', 'mouseover'].includes(type)) {
      const wrappedHandler = function(e) {
        const zoom = parseFloat(getComputedStyle(mainContainer).zoom) || 1;
        // 创建修正后的事件对象
        const correctedEvent = new e.constructor(e.type, {
          ...e,
          pageX: e.pageX / zoom,
          pageY: e.pageY / zoom
        });
        handler.call(this, correctedEvent);
      };
      return originalAddEventListener.call(this, type, wrappedHandler, options);
    }
    return originalAddEventListener.call(this, type, handler, options);
  };
  

• 注意：需在THS库加载前执行这段代码，确保覆盖生效。

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