CSS Zoom 属性改变事件坐标，需要解决方法

Question

第一个

我致力于在第三方页面中注入 html/js/css 模块，该模块使用 CSS 自动缩放

zoom

。我无法从父元素中删除 

zoom

 属性，因为它是使用某种轮询机制自动添加的。我无权访问该代码，客户也不会更改它。

问题

我自己的嵌入式代码基本上是另一个第三方库，我们称之为

THS

。 

THS

 库确实在其事件处理程序中使用了 

event.pageX

 和 

event.pageY

 值。由于整个代码使用 

zoom

 包装在一个元素中，因此事件坐标不再正确。所以我点击并悬停在错误的位置。

展示柜

我只能在

div#custom-container

 元素内编辑 html 代码。 

div#main-container

 是自动应用缩放的元素。

const mainContainer = document.getElementById('main-container')

// enable / disable zoom
const zoomCb = document.getElementById('zoom-enabled')
zoomCb.addEventListener('click', () => {
    mainContainer.style.zoom = zoomCb.checked ? '50%' : ''
})

const workspace = document.getElementById('custom-container')

// Sample pageX and pageY are wrong when using zoom
workspace.addEventListener('click', e => {
    const point = document.getElementById('point')
    point.style.left = e.pageX + 'px'
    point.style.top = e.pageY + 'px'
})

#point {
    position: absolute;
    background-color: red;
    height: 25px;
    width: 25px;
}

#main-container {
    width: 100%;
    height: 300px;
}

#custom-container {
    width: 100%;
    height: 100%;
}


   

 <p>Click somewhere to move the red square</p>
  <label>
    enable zoom
    <input type="checkbox" id="zoom-enabled">
</label>


<div id="main-container">
    <div id="custom-container">
        <div id="point"></div>
    </div>

</div>

禁用缩放后，

#point

 div 元素将移动到正确的位置。启用缩放后，它不是..我在文档中读到，使用 css 

zoom

 时元素的边界发生了变化，这就是这些坐标错误的原因，但同样，我无法删除 

zoom

 属性。

我尝试过/发现了什么

CSS

transform

 可以完全替换 

zoom

 而不改变元素边界。所以点击事件提供了正确的坐标。

所以我尝试重置自定义模块根目录中的

zoom

 并相应地应用转换。但设置 

zoom: reset

 对我的元素没有影响，

reset

 值在最新版本的 

firefox/chrome/edge

 中未重新调整...

我不知道我可以尝试什么，而不是像所有

THS

模块代码一样重写，但这将花费我数周的时间，再加上将更改带给第三方托管商等。

最后

如果有任何不清楚的地方，请告诉我。
代码片段展示了我的问题，并且只是沙箱再现。
再次强调，缩放在我的场景中是不可避免的。指出我不应该使用缩放的答案根本没有帮助。
任何其他想法表示赞赏。

TY 阅读，我珍惜您的时间！>

Answer 1

尝试将坐标除以当前缩放级别。

const mainContainer = document.getElementById('main-container')

// enable / disable zoom
const zoomCb = document.getElementById('zoom-enabled')
zoomCb.addEventListener('click', () => {
    mainContainer.style.zoom = zoomCb.checked ? '50%' : ''
})

const workspace = document.getElementById('custom-container')

// Sample pageX and pageY are wrong when using zoom
workspace.addEventListener('click', e => {
    const zoomLevel = getComputedStyle(mainContainer).zoom

    const point = document.getElementById('point')
    point.style.left = e.pageX / zoomLevel + 'px'
    point.style.top = e.pageY / zoomLevel + 'px'
})

#point {
    position: absolute;
    background-color: red;
    height: 25px;
    width: 25px;
}

#main-container {
    width: 100%;
    height: 300px;
}

#custom-container {
    width: 100%;
    height: 100%;
}


   

 <p>Click somewhere to move the red square</p>
  <label>
    enable zoom
    <input type="checkbox" id="zoom-enabled">
</label>


<div id="main-container">
    <div id="custom-container">
        <div id="point"></div>
    </div>

</div>