Javascript Code to Get Current Mouse Position

Extremely Simple Easy Way to Get the Current Mouse Position in Javascript. Code to Get Mouse X and Y relative to the Document and to get the Mouse X and Y relative to any Element on the Web Page.

The below code to get the current mouse x and y in javascript can be event modified meaning you can change onmousemove to onclick or onmousedown. You will notice that a target element is not specified. That is because if a target element is not indicated, the document is assumed.

onmousemove =(e)=> { let x = e.clientX, y = e.clientY; // console.log(x,y); }

You can target a specific element with code not much more complex. The below code will get the mouse x and mouse y relative to the element being targeted meaning that when the mouse is at the top of the element, regardless of where that element is within the webpage the return mouse y value will be 0, and when the mouse is all the way to the left edge of the target element the mouse x position returned will be zero.

let divx = document.querySelector('#divx'); divx.onmousemove =(e)=> { let rect = divx.getBoundingClientRect(), x = parseInt(e.clientX - rect.left), y = parseInt(e.clientY - rect.top); // console.log(x,y); }