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
HTML DOM MouseEvent clientX Property
The HTML DOM MouseEvent clientX property returns the horizontal coordinate (x-axis position) of the mouse pointer relative to the visible area of the web browser when a mouse event occurs. The coordinate is measured in pixels from the left edge of the browser's client area, excluding scrollbars, toolbars, and other browser interface elements.
Syntax
Following is the syntax for accessing the clientX property −
MouseEventObject.clientX
Return Value
The clientX property returns a number representing the horizontal pixel coordinate of the mouse pointer. The value is always relative to the current viewport, not the entire document. If the page is scrolled, clientX remains relative to the visible area.
Basic Usage Example
Following example demonstrates how to capture and display the clientX coordinate when clicking on different areas −
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Click anywhere to see clientX coordinate</h2>
<div id="clickArea" style="width: 400px; height: 200px; background-color: #f0f8ff; border: 2px solid #4682b4; padding: 20px; margin: 20px 0;">
<p>Click inside this blue area</p>
</div>
<p id="result">Click coordinates will appear here</p>
<script>
document.addEventListener('click', function(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById('result').innerHTML =
'Mouse clicked at: clientX = ' + x + ', clientY = ' + y;
});
</script>
</body>
</html>
Click anywhere on the page to see the clientX and clientY coordinates displayed below the blue area.
Interactive Game Example
Following example creates a simple mouse navigation game using clientX to track horizontal mouse movement −
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX Game</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
#gameArea {
width: 70%;
margin: 20px auto;
padding: 0;
text-align: center;
border: 2px solid black;
height: 120px;
background-color: #28a745;
position: relative;
}
.danger-zone {
background-color: #dc3545;
height: 40px;
margin: 0;
color: white;
line-height: 40px;
}
#safeZone {
height: 40px;
line-height: 40px;
background-color: #28a745;
color: white;
}
button {
padding: 10px 20px;
margin: 10px;
border-radius: 8px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent clientX Navigation Game</legend>
<p>Move your mouse through the green safe zone to the right edge!</p>
<div id="gameArea">
<div class="danger-zone">DANGER ZONE</div>
<div id="safeZone">SAFE ZONE - Navigate Here</div>
<div class="danger-zone">DANGER ZONE</div>
</div>
<button type="button" onclick="startGame()">Start Game</button>
<button type="button" onclick="resetGame()">Reset</button>
<div id="gameStatus">Click Start to begin</div>
</fieldset>
</form>
<script>
var gameArea = document.getElementById('gameArea');
var gameStatus = document.getElementById('gameStatus');
var gameActive = false;
function trackMouse(event) {
if (!gameActive) return;
var rect = gameArea.getBoundingClientRect();
var x = event.clientX;
var y = event.clientY;
var relativeY = y - rect.top;
gameStatus.innerHTML = 'Mouse Position: X=' + x + ', Y=' + y + ' (Relative Y=' + Math.round(relativeY) + ')';
if (relativeY > 40 && relativeY < 80) {
gameStatus.innerHTML += '<br><span style="color: green;">Good! Stay in the safe zone!</span>';
if (x > rect.right - 50) {
gameStatus.innerHTML = '<span style="color: blue; font-weight: bold;">Congratulations! You reached the end!</span>';
gameActive = false;
}
} else {
gameStatus.innerHTML += '<br><span style="color: red;">DANGER! You entered the red zone!</span>';
gameActive = false;
}
}
function startGame() {
gameActive = true;
gameStatus.innerHTML = 'Game started! Move your mouse through the green area.';
gameArea.addEventListener('mousemove', trackMouse);
}
function resetGame() {
gameActive = false;
gameArea.removeEventListener('mousemove', trackMouse);
gameStatus.innerHTML = 'Game reset. Click Start to play again.';
}
</script>
</body>
</html>
This game demonstrates practical usage of clientX by tracking mouse movement and providing feedback based on the horizontal position relative to game boundaries.
ClientX vs Other Mouse Coordinates
Understanding the difference between various mouse coordinate properties is important −
| Property | Reference Point | Description |
|---|---|---|
clientX |
Browser viewport | Horizontal position relative to the visible browser window |
pageX |
Entire document | Horizontal position relative to the whole document (includes scroll) |
screenX |
User's screen | Horizontal position relative to the user's entire screen |
offsetX |
Target element | Horizontal position relative to the element that triggered the event |
Practical Applications
The clientX property is commonly used in the following scenarios −
Drag and drop functionality − Tracking element positions during drag operations
Custom context menus − Positioning popup menus at the mouse cursor location
Drawing applications − Recording mouse coordinates for drawing on canvas elements
Interactive games − Detecting mouse position for game mechanics and collision detection
Tooltip positioning − Showing tooltips near the mouse cursor
Simple Coordinate Display Example
Following example shows real-time mouse coordinate tracking −
<!DOCTYPE html>
<html>
<head>
<title>Real-time ClientX Tracking</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; height: 100vh;">
<h2>Mouse Coordinate Tracker</h2>
<div id="coordinates" style="position: fixed; top: 10px; right: 10px; background: #f0f0f0; padding: 10px; border: 1px solid #ccc; border-radius: 5px;">
Move your mouse to see coordinates
</div>
<div style="width: 300px; height: 200px; background: linear-gradient(45deg, #ffeb3b, #ff5722); margin: 20px 0; border-radius: 10px;">
<p style="text-align: center; line-height: 200px; margin: 0; color: white; font-weight: bold;">Move mouse over this colorful area</p>
</div>
<script>
document.addEventListener('mousemove', function(event) {
var coordDiv = document.getElementById('coordinates');
coordDiv.innerHTML =
'<strong>Mouse Coordinates:</strong><br>' +
'clientX: ' + event.clientX + 'px<br>' +
'clientY: ' + event.clientY + 'px<br>' +
'screenX: ' + event.screenX + 'px<br>' +
'screenY: ' + event.screenY + 'px';
});
</script>
</body>
</html>
Move your mouse around the page to see how clientX changes relative to the browser window, while screenX shows the position relative to your entire screen.
Conclusion
The MouseEvent clientX property provides the horizontal mouse coordinate relative to the browser viewport, making it essential for interactive web applications, games, and dynamic user interfaces. Combined with clientY, it enables precise mouse tracking and positioning for various web development scenarios.
204 Views
