• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / How to Get the Cursor Position in JavaScript

How to Get the Cursor Position in JavaScript

April 11, 2022 Leave a Comment

To get the cursor position in JavaScript, we can use the MouseEvent client properties, that is the clientX Property and the clientY Property.

event.clientX
event.clientY

To get the cursor position we will need to attach a mouse event to either a div on the page or to the whole page document itself. We will need to attach a function to that event, and then use the function to get the position of the cursor.

A good event to use to get the position of the cursor is the onmousemove event. Whenever a user moves their mouse on the specified element, the onmousemove event will be triggered. We can then call a function, and the important part, we will pass in a parameter to the function, that will contain information about our cursor.

Here is the HTML setup we can use for the first part of getting the cursor position.

<body onmousemove="getCursorPosition(event)"></body>

As you can see in the code above, we attach the function getCusorPosition and pass it a parameter we call event. We will use this in the next and final part below.

function getCursorPosition(event) {
  var xCursorPosition = event.clientX;
  var yCursorPosition = event.clientY;
}

As we can see from the code above in our function, we take the parameter that has been passed to us called event and get the properties clientX and clientY of it.

We put these together to get the cursor position. Let’s take a look at this in action below.

How to Get and Display the Cursor Position in JavaScript

In this example, we will create a div that takes up a section of the page. We will then add the onmousemove event to the div to run a function to help us get the X and Y coordinates of the cursor. The user will have to move their mouse in this div for us to get this information.

Finally, we will have two divs below where we can display the x and y positions of our cursor to the user.

Here is the HTML set up:


<style>#div1 { height: 300px; width:98%; border: 1px solid #444; position: relative; }</style>
<div id="div1" onmousemove="getCursorPosition(event)">
</div>
<div class="cursor-position">The X cursor position is: <span id="cursor-position-x"></span>. </div>
<div class="cursor-position">The Y cursor position is: <span id="cursor-position-y"></span>. </div>

In our function getCursorPosition, we will use the parameter that has been passed to us to get the x and y coordinates of the cursor. To get the x coordinate of the cursor, we will use the clientX property. To get the y coordinate of the cursor, we will use the clientY property.

We will finally use the textContent property to display the results to the user.

And that’s it. Here is the JavaScript code:

Here is the code:

function getCursorPosition(event) {
  document.getElementById("cursor-position-x").textContent = event.clientX;
  document.getElementById("cursor-position-y").textContent = event.clientY;
}

The final code and output for this example is below:

Code Output:

The X cursor position is: .
The Y cursor position is: .

Full Code:


<style>#div1 { height: 300px; width:98%; border: 1px solid #444; position: relative; }</style>
<div id="div1" onmousemove="getCursorPosition(event)">
</div>
<div class="cursor-position">The X cursor position is: <span id="cursor-position-x"></span>. </div>
<div class="cursor-position">The Y cursor position is: <span id="cursor-position-y"></span>. </div>

<script>

function getCursorPosition(event) {
  document.getElementById("cursor-position-x").textContent = event.clientX;
  document.getElementById("cursor-position-y").textContent = event.clientY;
}

</script>

Hopefully this article has helped you understand tow to get the cursor position in JavaScript.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Round to 4 Decimal Places
  • 2.  JavaScript asinh – Find Hyperbolic Arcsine of Number Using Math.asinh()
  • 3.  JavaScript substring – How to Get a Substring From a String
  • 4.  Using JavaScript to Create a Unique Array
  • 5.  Using JavaScript to Convert a String to Uppercase
  • 6.  JavaScript Check if Attribute Exists in HTML Element
  • 7.  Using JavaScript to Get a Random Number Between 1 and 10
  • 8.  JavaScript String endsWith Method
  • 9.  Using JavaScript to Check if String Contains Only Letters
  • 10.  JavaScript cos – Find Cosine of Number in Radians Using Math.cos()

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy