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
What is the role of screenX Mouse Event in JavaScript?
The screenX mouse event property returns the horizontal coordinate of the mouse pointer relative to the user's screen when an event is triggered. This is useful for tracking precise mouse positions across the entire screen.
Syntax
event.screenX
Return Value
Returns a number representing the horizontal distance in pixels from the left edge of the user's screen to the mouse pointer position.
Example
Click anywhere on the paragraph below to see the mouse coordinates displayed:
<!DOCTYPE html>
<html>
<body>
<p onclick="coordsFunc(event)" style="padding: 20px; background-color: #f0f0f0; cursor: pointer;">
Click here to get the x (horizontal) and y (vertical) coordinates of the mouse pointer.
</p>
<div id="result"></div>
<script>
function coordsFunc(event) {
var x_coord = event.screenX;
var y_coord = event.screenY;
var xycoords = "Screen X: " + x_coord + "px, Screen Y: " + y_coord + "px";
document.getElementById("result").innerHTML = xycoords;
}
</script>
</body>
</html>
Difference Between Screen and Client Coordinates
Understanding the difference between screenX and clientX coordinates:
<!DOCTYPE html>
<html>
<body>
<div onclick="showCoordinates(event)" style="padding: 30px; background-color: #e0e0e0; margin: 50px;">
Click to compare screenX vs clientX coordinates
</div>
<div id="coordinates"></div>
<script>
function showCoordinates(event) {
var screenX = event.screenX;
var clientX = event.clientX;
var result = "<strong>Screen X:</strong> " + screenX + "px (relative to screen)<br>" +
"<strong>Client X:</strong> " + clientX + "px (relative to browser window)";
document.getElementById("coordinates").innerHTML = result;
}
</script>
</body>
</html>
Comparison
| Property | Reference Point | Use Case |
|---|---|---|
screenX |
User's entire screen | Multi-monitor setups, absolute positioning |
clientX |
Browser viewport | Element positioning within page |
Conclusion
The screenX property provides screen-absolute mouse coordinates, making it ideal for applications requiring precise screen positioning or multi-monitor support.
Updated on: 2026-03-15T23:18:59+05:30
216 Views
Advertisements