[Edit]

JavaScript - get mouse position

1 contributors

2 contributions

0 discussions

0 points

Created by:

Palpys

764

In this article, we would like to show you how to get mouse X and Y positions using JavaScript.

Quick solution:

xxxxxxxxxx
 
var element = document.querySelector('#element-id');
​
element.addEventListener('click', function(event) {
  console.log(`x: ${event.clientX}, y: ${event.clientY}`);
});

Note:

The coordinates are measured from the upper left corner (0,0).

Practical example

Edit

In this example, we use event.clientX and event.clientY properties to get mouse position.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    body {
      height: 100px;
      padding: 10px;
      border: 1px solid #28a745;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div>Click here to get mouse coordinates.</div>
  <script>
​
    document.body.addEventListener('click', function(event) {
      console.log(`x: ${event.clientX}, y: ${event.clientY}`);
    });
​
  </script>
</body>
</html>