How to get the click position on the page when using css scaling

My current code

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

however, there is a zoom set on the body (although I do not control it, sometimes it is not), and event.pageX and event.pageY do not work correctly.

Is there a way to get a relative value or something else?

Edit:

Css on body

body {
    zoom: 0.485417;
}

The scaling value can change (as part of some external JS - I have no control over this value, my JS does not set it, and it can change)

+4
source share
1 answer

I nailed this with andlrc comment:

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

x and y passed to "doMyThing" are now correctly positioned regardless of what the zoom is set for.

+2
source

All Articles