DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

Get the current position of the cursor on the page

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.

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay