当涉及css缩放时，如何获得页面上的点击位置

How to get the click position on a page when a css zoom is involved

本文关键字：位置 何获得 css 缩放      更新时间：2023-09-26

我当前的代码是

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

然而，主体上有一个缩放设置（尽管我无法控制它，但有时它不在那里），event.pageX和event.pageY出现了错误。

有没有一种方法可以得到一个相对值或其他什么？

编辑：

正文上的css是

body {
    zoom: 0.485417;
}

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

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

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

传递到"doMyThing"的x和y现在已正确定位，无论缩放设置为什么。

不要将缩放值赋予主体，而是将缩放值赋给主体下的顶部div。

即：

<style>.zoom-this{zoom:85%}</style>
<body>
<div class='zoom-this'>
      Blabla content
</div>
</body>
相关文章：