Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

My current code is

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

however, there is a zoom set on the body (although I've no control over it, sometimes it's not there) and event.pageX and event.pageY are coming out wrong.

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

Edit:

The css on the body is

body {
    zoom: 0.485417;
}

The zoom value may change (as part of some external JS - I've no control over that value, my JS doesn't set it, and it can change)

like image 214
Paul Avatar asked Oct 18 '22 09:10

Paul


1 Answers

I nailed this with the help of andlrc's comment:

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

x and y passed in to "doMyThing" is now properly positioned, regardless of what the zoom is set to.

like image 78
Paul Avatar answered Nov 01 '22 11:11

Paul