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 offsetX Property
The HTML DOM MouseEvent offsetX property returns the horizontal (x) coordinate of the mouse pointer relative to the target element when a mouse event is triggered. It represents the distance in pixels from the left edge of the element to the mouse cursor position.
Syntax
Following is the syntax for accessing the offsetX property −
MouseEventObject.offsetX
Return Value
The offsetX property returns a number representing the horizontal coordinate of the mouse pointer relative to the target element's left edge, measured in pixels.
How It Works
The offsetX property calculates the mouse position relative to the element that triggered the event, not the entire viewport or document. This makes it particularly useful for:
Creating interactive drawing applications
Building custom UI components like sliders or color pickers
Implementing drag-and-drop functionality
Game development where precise mouse positioning is needed
Basic Example
Following example demonstrates how to get the offsetX coordinate when clicking on an element −
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetX Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="clickArea" style="width: 300px; height: 200px; background-color: #f0f8ff; border: 2px solid #4285f4; cursor: crosshair; display: flex; align-items: center; justify-content: center;">
Click anywhere in this box
</div>
<p id="result" style="margin-top: 15px; font-weight: bold;">Click coordinates will appear here</p>
<script>
document.getElementById('clickArea').addEventListener('click', function(event) {
var x = event.offsetX;
var y = event.offsetY;
document.getElementById('result').textContent = 'offsetX: ' + x + ', offsetY: ' + y;
});
</script>
</body>
</html>
The output displays the exact coordinates where you clicked within the element −
[Blue bordered box with text "Click anywhere in this box"] Click coordinates will appear here (updates with actual coordinates when clicked)
Interactive Game Example
Following example shows a more complex usage where offsetX is used to create an interactive mouse navigation game −
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetX Game</title>
<style>
#gameArea {
width: 400px;
height: 150px;
margin: 20px auto;
border: 2px solid #333;
background-color: #28a745;
position: relative;
cursor: crosshair;
}
.danger {
position: absolute;
width: 100%;
height: 40px;
background-color: #dc3545;
border: 1px solid #000;
}
#topDanger { top: 0; }
#bottomDanger { bottom: 0; }
#safeZone {
position: absolute;
top: 42px;
height: 66px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
#controls {
text-align: center;
margin: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="controls">
<h2>Mouse Navigation Game</h2>
<p>Navigate through the green safe zone without touching the red danger areas</p>
<button id="startBtn" onclick="startGame()">Start Game</button>
<div id="status">Click Start to begin</div>
</div>
<div id="gameArea">
<div class="danger" id="topDanger"></div>
<div id="safeZone">Navigate through this safe zone</div>
<div class="danger" id="bottomDanger"></div>
</div>
<script>
var gameArea = document.getElementById('gameArea');
var status = document.getElementById('status');
var gameActive = false;
function playGame(event) {
var x = event.offsetX;
var y = event.offsetY;
// Check if mouse is in safe zone (between y=42 and y=108)
if (y > 42 && y < 108) {
status.textContent = 'Safe! X: ' + x + ', Y: ' + y;
status.style.color = '#28a745';
// Win condition: reach the right edge
if (x > 380) {
status.textContent = 'Congratulations! You made it!';
endGame();
}
} else {
status.textContent = 'Game Over! You hit the danger zone.';
status.style.color = '#dc3545';
endGame();
}
}
function startGame() {
gameActive = true;
gameArea.addEventListener('mousemove', playGame);
status.textContent = 'Game started! Navigate carefully...';
status.style.color = '#333';
document.getElementById('startBtn').disabled = true;
}
function endGame() {
gameActive = false;
gameArea.removeEventListener('mousemove', playGame);
document.getElementById('startBtn').disabled = false;
}
</script>
</body>
</html>
The game tracks your mouse position using offsetX and offsetY coordinates. Move your mouse through the green safe zone without touching the red danger areas to win −
Mouse Navigation Game Navigate through the green safe zone without touching the red danger areas [Start Game] Click Start to begin [Game area with red danger zones at top/bottom and green safe zone in middle]
Drawing Application Example
Following example demonstrates using offsetX for creating a simple drawing application −
<!DOCTYPE html>
<html>
<head>
<title>Drawing with offsetX</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Simple Drawing Canvas</h2>
<canvas id="drawCanvas" width="400" height="300" style="border: 2px solid #333; cursor: crosshair;"></canvas>
<br>
<button onclick="clearCanvas()" style="margin-top: 10px;">Clear Canvas</button>
<p>Click and drag to draw</p>
<script>
var canvas = document.getElementById('drawCanvas');
var ctx = canvas.getContext('2d');
var isDrawing = false;
canvas.addEventListener('mousedown', function(event) {
isDrawing = true;
var x = event.offsetX;
var y = event.offsetY;
ctx.beginPath();
ctx.moveTo(x, y);
});
canvas.addEventListener('mousemove', function(event) {
if (!isDrawing) return;
var x = event.offsetX;
var y = event.offsetY;
ctx.lineTo(x, y);
ctx.stroke();
});
canvas.addEventListener('mouseup', function() {
isDrawing = false;
});
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
The drawing application uses offsetX and offsetY to track precise mouse movements within the canvas element for drawing lines −
Simple Drawing Canvas [Canvas with black border - drawable area] [Clear Canvas] Click and drag to draw
Browser Compatibility
The offsetX property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It provides consistent behavior across different platforms and devices.
Conclusion
The MouseEvent offsetX property provides precise horizontal mouse coordinates relative to the target element, making it essential for interactive web applications, games, and drawing tools. Combined with offsetY, it enables accurate mouse tracking within specific elements regardless of their position on the page.
687 Views
