Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript – Getting Coordinates of mouse
In JavaScript, you can get the coordinates of the mouse cursor using mouse event properties. The most common approach is to use the mousemove event listener along with event properties like clientX, clientY, pageX, and pageY.
Mouse Coordinate Properties
Different properties provide coordinates relative to different reference points:
-
clientX, clientY- Coordinates relative to the viewport (visible browser window) -
pageX, pageY- Coordinates relative to the entire document (includes scrolled areas) -
screenX, screenY- Coordinates relative to the user's screen -
offsetX, offsetY- Coordinates relative to the target element
Example: Basic Mouse Tracking
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.coordinates {
font-size: 18px;
font-weight: 500;
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
margin: 10px 0;
}
.tracking-area {
width: 400px;
height: 200px;
border: 2px solid #333;
background-color: #e8f4f8;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
cursor: crosshair;
}
</style>
</head>
<body>
<h1>Mouse Coordinates Tracking</h1>
<div class="coordinates" id="viewport-coords">Viewport: Move mouse to see coordinates</div>
<div class="coordinates" id="page-coords">Page: Move mouse to see coordinates</div>
<div class="tracking-area" id="trackingArea">
Move mouse over this area
</div>
<div class="coordinates" id="element-coords">Element offset: Hover over blue area</div>
<script>
const viewportCoords = document.getElementById("viewport-coords");
const pageCoords = document.getElementById("page-coords");
const elementCoords = document.getElementById("element-coords");
const trackingArea = document.getElementById("trackingArea");
// Track mouse movement on entire document
document.addEventListener("mousemove", (event) => {
viewportCoords.textContent = `Viewport: X: ${event.clientX}, Y: ${event.clientY}`;
pageCoords.textContent = `Page: X: ${event.pageX}, Y: ${event.pageY}`;
});
// Track mouse movement over specific element
trackingArea.addEventListener("mousemove", (event) => {
elementCoords.textContent = `Element offset: X: ${event.offsetX}, Y: ${event.offsetY}`;
});
// Clear element coordinates when mouse leaves
trackingArea.addEventListener("mouseleave", () => {
elementCoords.textContent = "Element offset: Hover over blue area";
});
</script>
</body>
</html>
Coordinate Properties Comparison
| Property | Reference Point | Use Case |
|---|---|---|
clientX, clientY |
Viewport (visible area) | UI positioning, tooltips |
pageX, pageY |
Entire document | Scrollable content tracking |
offsetX, offsetY |
Target element | Element-specific interactions |
screenX, screenY |
User's screen | Multi-screen applications |
Practical Example: Click Position Logger
<!DOCTYPE html>
<html>
<head>
<style>
.click-area {
width: 100%;
height: 300px;
border: 2px dashed #666;
background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%);
background-size: 20px 20px;
position: relative;
cursor: pointer;
}
.click-marker {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.log {
margin-top: 10px;
padding: 10px;
background-color: #f9f9f9;
border-left: 4px solid #007acc;
max-height: 150px;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>Click Position Logger</h1>
<p>Click anywhere in the area below to log coordinates:</p>
<div class="click-area" id="clickArea"></div>
<div class="log" id="clickLog">
Click positions will appear here...
</div>
<button onclick="clearLog()">Clear Log</button>
<script>
const clickArea = document.getElementById("clickArea");
const clickLog = document.getElementById("clickLog");
let clickCount = 0;
clickArea.addEventListener("click", (event) => {
clickCount++;
// Create visual marker
const marker = document.createElement("div");
marker.className = "click-marker";
marker.style.left = event.offsetX + "px";
marker.style.top = event.offsetY + "px";
clickArea.appendChild(marker);
// Log coordinates
const logEntry = `Click ${clickCount}: Viewport(${event.clientX}, ${event.clientY}) | Element(${event.offsetX}, ${event.offsetY})`;
clickLog.innerHTML += "<div>" + logEntry + "</div>";
clickLog.scrollTop = clickLog.scrollHeight;
});
function clearLog() {
clickLog.innerHTML = "Click positions will appear here...";
clickCount = 0;
// Remove all markers
const markers = clickArea.querySelectorAll(".click-marker");
markers.forEach(marker => marker.remove());
}
</script>
</body>
</html>
Common Use Cases
-
Custom tooltips: Position tooltips near the mouse cursor using
clientX/clientY - Drawing applications: Track precise coordinates for canvas or SVG drawing
- Drag and drop: Calculate movement distances and drop positions
- Interactive games: Track player input and object positioning
- UI feedback: Show hover effects or highlight areas based on mouse position
Browser Compatibility
Mouse coordinate properties are supported in all modern browsers. The clientX/clientY properties have the best compatibility, while offsetX/offsetY may have slight variations in older browsers.
Conclusion
Getting mouse coordinates in JavaScript is straightforward using event properties like clientX/clientY for viewport coordinates or offsetX/offsetY for element-relative positions. Choose the appropriate coordinate system based on your specific use case and requirements.
Updated on: 2026-03-15T23:18:59+05:30
524 Views
Advertisements