Get Mouse Position in JavaScript ('x' and 'y') - JavaScript Tutorial For Beginners

Source code on CodePen:

Through using the MouseEvent object, you are able to access the 'x' and 'y' properties, giving you the position of the mouse when that event fired off.

In this video we look at using the 'mousemove' event on the Window object, allowing us to constantly update the x and y coordinates in the browser as the mouse moves across.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[acupofsoda]

This is so short and precise yet so helpful, thanks a lot.

[bigjimtrucker]

I have been looking for this soooo easy thanks awesome video

[lu-vuongle]

Love these JS videos, keep them coming 👍

[wergler]

This video is AWESOME!! Very informative!

[Kodeispoetry]

Short, but Precise and Crisp. That's the beauty. Thumbs Up and Kudos. Sending you Good Karma.

[happyarish]

Very well explained. Thank you so much!!

[DriveandThrive]

Helpful as I am trying to learn mouse trails thank you for the video

[likyepetti]

Hi, nice video, actually i'm struggling to find a way to detect mouse coordinates while moving faster without lapse. Because i'm trying to do a pixel art drawing canvas and when im holding the mouse to draw lines if I move slow it works perfectly, but if I move the mouse faster many gaps in the line appear.

[santokhan_]

Thank you, brother. I have learned from you.

[_REcon_]

Very useful script code. Thanks a lot, sir.

[billfeliciano]

How do we put these values in JavaScript code to move the mouse to this point?

[NekoTheCatTheSlapper]

Hi, I'm a real beginner and I want to know how I can assign the X and Y coordinates of the mouse to a variable. But the video was great! =)

[JolanXBL]

Mine's not outputting to console any numbers. It's literally printing the phrase "x: $ { e.x } | y: $ { e.y }"

[Alice.]

is it possible to create something who can indicate the mouse position but in a screen of a certain resolution I can choose

[aroshuabdulrehman]

i want to change background color through mousemove and divide my window screen into two part that take different color...how this will possible?

[calibr]

what is a mouse listener coordinate in javascript

[mechang]

How would you return the x and y mouse positions to save in a var?

[chromefirefox]

I saw the atom editor being used and understood the entire video without even watching it :)

[sallylauper]

This code doesn't appear to work. It works in CodePen, but when I copied the code into VSCode, on Live Server it shows nothing for x and y and throws a 404 error when I open console. when I run it locally it doesn't throw the 404 error, but still still shows nothing.

[gregarotar]

Use console.log(e.screenX, e.screenY);