DEV Community

loading...

Get the current position of the cursor on the page

phongduong profile image Phong Duong Originally published at phongduong.dev on ・1 min read

To get the current position of the cursor on the page, you retrieve pageX and pageY property of the MouseEvent interface. These properties are the X and Y coordinates of the event on the document. They are in pixels and relative to the left and top edges of the document.

document.addEventListener("mousemove", ({ pageX, pageY }) => {
   console.log(pageX, pageY)
});
Enter fullscreen mode Exit fullscreen mode

These positions can change if you scroll the page. For example: if you scroll the page down 800px and move the cursor to 200px from the top edge of the document, pageY returns 1000.

Discussion

pic
Editor guide