涉及css缩放时如何获取页面上的点击位置答案

【问题标题】：How to get the click position on a page when a css zoom is involved涉及css缩放时如何获取页面上的点击位置
【发布时间】：2016-05-11 21:05:32
【问题描述】：

我当前的代码是

document.addEventListener('click', function(event) {
    console.log(event.pageX + "-" + event.pageY);
});

但是，body 上有一个缩放设置（虽然我无法控制它，但有时它不存在）并且 event.pageX 和 event.pageY 出现错误。

有没有办法获取相对值之类的？

编辑：

body 上的 css 是

body {
    zoom: 0.485417;
}

缩放值可能会改变（作为某些外部 JS 的一部分 - 我无法控制该值，我的 JS 没有设置它，它可以改变）

【问题讨论】：

这是一个很好的问题，似乎它已被报告为 Edge、Chromium 和 Firefox 的错误。我不确定这是否是一个错误。
也许这会有所帮助 >> github.com/tombigel/detect-zoom 检测到缩放后，您可以计算原始 window.width 和缩放宽度之间的差异，并从点击位置添加或减去此差异
你能在问题中加入css吗？
@Paul 您也许可以阅读缩放：getComputedStyle(document.body).zoom

标签： javascript html css

【解决方案1】：

我在 andlrc 的评论的帮助下解决了这个问题：

var zoomLevel = getComputedStyle(document.body).zoom;
if (zoomLevel <= 0) { zoomLevel = 0.1; }
doMyThing(event.pageX / zoomLevel, event.pageY / zoomLevel);

无论缩放设置如何，传递给“doMyThing”的 x 和 y 现在都已正确定位。

【讨论】：

【解决方案2】：

不是给 body 赋予缩放值，而是给 body 下的顶部 div 赋予缩放值。

即：

<style>.zoom-this{zoom:85%}</style>

<body>
<div class='zoom-this'>
      Blabla content
</div>
</body>

【讨论】：