CODEWITHSUNDEEP
javascripteventsmouseeventcoordinatesmouselistener
RealAnyOne
RealAnyOne

Reputation: 235

e.screenY giving wrong value (mouse coordinates)

I'm having trouble getting the Y mouse coordinates.

function mouseDistance() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(e) {
        document.getElementById("tester").innerHTML = e.screenX + " " + e.screenY;
    }
}

function mainLoop() {
    mouseDistance();
    requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);

e.screenX is working properly, but e.screenY isn't. In the html body, at the top most edge it doesn't get lower than 95px (shouldn't it be 0?).

I do have a 'CSS reset'.

Example: The mouse at the top left corner will be at x: 0; y: 95;

Upvotes: 2

Views: 1697

Answers (1)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

The reason is that screenY provides the vertical coordinate (offset) of the mouse pointer in global (screen) coordinates.

The property you probably want to use is the clientY, which returns the vertical coordinate within the application's client area at which the event occurred.

For example, clicking in the top-left corner of the client area will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.

Upvotes: 4

Related Questions