How to Get Mouse Position in JavaScript

How to Get Mouse Position in JavaScript (Free Code)

How to Get Mouse Position in JavaScript

In this tutorial, you will learn how to get Mouse Position using JavaScript. This javascript get mouse position project will help you know which position you currently have your mouse in. This means that the location of your mouse is currently located on the web page along the X and Y-axis.

You can see the position of the mouse only if you use some amount of JavaScript code. The value of this x-axis and y-axis will change when you change the position of the mouse. 

We see the position of the mouse in many types of large applications. If you want, you can easily create this get mouse position javascript project using a little javascript.

JavaScript Get Mouse Position

Here I have used HTML, CSS, and some JavaScript. Although HTML and CSS are only for creating more structures. Basically, JavaScript will do the job.

Below I have given a demo that will help you to know how it works (get mouse position in javascript). Here you will find the required source code which you can copy directly. But below I have given the download button and shared the step-by-step tutorial.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, a small box has been created on top of a web page. That box contains space to display the values ​​of the X and Y-axis. 

When you move the mouse over the webpage or change the position of the mouse, its value will be displayed in pixels in the box. The background color of the box is white and I have used a shadow all around to enhance the beauty.

Get Mouse Position in JavaScript

Below I have shared step by step tutorial on how I created Mouse Position Track. As I said before I used JavaScript here so you need to have a basic idea about JavaScript.

Step 1: Make a box on the webpage

I have created a box on the web page using the following codes. In which the value of Mouse Position can be seen.

<div id=”output”>Move the mouse</div>

I designed the webpage using the following codes. Here I have used blue color in the background of the webpage.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}
body {
height: 100vh;
background: rgb(11, 96, 176);
}

The following codes have been used to design the box at the top of that page. The width of this box is 70vmin and the background color is white. Shadows have been used around the box to enhance the beauty.

#output {
background-color: #ffffff;
width: 70vmin;
max-width: 500px;
padding: 20px 30px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(4, 1, 22, 0.12);
font-size: 2em;
display: flex;
justify-content: center;
}
Make a box on the webpage

Step 2: Collect Mouse Position with JavaScript

I have done the basic design of the javascript get mouse position project above. Now it needs to be implemented with the help of JavaScript.

A constant of the ID function of the box is determined using one line code below. Because we can’t use any HTML element directly in JavaScript.

let output = document.getElementById(“output”);

➤ The mousemove event is fired at an element when a pointing device is moved. The e.client property returns the coordinate of the mouse pointer when a mouse event was triggered.

➤ The change of mouse along the x-axis is collected. Then we store that value in ‘xPos’. In the same way, we have saved the mouse change along the y axis in ‘yPos’.

➤ Then using ‘innerHTML’ we have arranged to display that value in the box in the webpage. ‘innerHTML’ allows reading and replacing everything within a given DOM element.

window.addEventListener(“mousemove”, (e) => {
  let xPos = e.clientX;
  let yPos = e.clientY;
  output.innerHTML = `<div><span>X: </span>${xPos}px</div><div><span>Y: </span>${yPos}px</div>`;
});
Collect Mouse Position with JavaScript

Step 3: Design the value of Mouse Position

Now using some amount of CSS I have designed the information in the box. This means that the following codes have been used to design some of the values ​​that can be found in the box.

#output div {
margin: 0px 10px;
}
span {
color: #0c58af;
}
Design the value of Mouse Position

Hopefully, the above tutorial has helped you to know how to get mouse position javascript. The button below has the source code which you can download. 

If you have any questions you can ask on my Instagram. Please comment on how you like this javascript get mouse position project.