JavaScript MouseEvent screenX Property: Mouse Screen X Position
The screenX property of the JavaScript MouseEvent interface provides the horizontal (X-axis) coordinate of the mouse pointer, relative to the origin of the screen. This property is extremely useful for determining the precise location of the mouse cursor on the user’s physical display when a mouse event occurs. Understanding and using screenX can enhance interactivity and provide valuable contextual information in your web applications.
Purpose of the screenX Property
The main purpose of the screenX property is to:
- Determine the mouse cursor’s horizontal position relative to the screen.
- Track the mouse movement across the entire screen, not just within the browser window.
- Develop interactive applications where screen coordinates are necessary.
Syntax
The screenX property is read-only and is accessed via a MouseEvent object.
event.screenX;
Return Value
- Number: Returns the X-coordinate (horizontal distance in pixels) of the mouse cursor relative to the left edge of the screen.
Key Differences: screenX, clientX, and pageX
It’s crucial to understand the distinctions between screenX, clientX, and pageX to use them correctly:
screenX: The X-coordinate of the mouse pointer relative to the top-left corner of the screen. This is the absolute position of the mouse on the physical screen.clientX: The X-coordinate of the mouse pointer relative to the top-left corner of the viewport (browser window). This coordinate changes when the user scrolls the page.pageX: The X-coordinate of the mouse pointer relative to the top-left corner of the entire document. This coordinate accounts for scrolling and will give you the document-based position.
| Property | Description | Relative To |
|---|---|---|
| `screenX` | Mouse X-coordinate | Screen |
| `clientX` | Mouse X-coordinate | Viewport |
| `pageX` | Mouse X-coordinate | Document |
Examples
Let’s look at some examples to better understand how to use the screenX property.
Basic Example: Displaying screenX
This example shows how to get and display the screenX position of the mouse cursor when the user clicks anywhere on the document.
<!DOCTYPE html>
<html>
<head>
<title>screenX Example</title>
<style>
body { font-family: sans-serif; }
#output_screenx_basic { margin-top: 20px; font-weight: bold; }
</style>
</head>
<body>
<h1>Click anywhere on the page to see screenX coordinate</h1>
<div id="output_screenx_basic"></div>
<script>
document.addEventListener('click', function(event) {
const screenXValue = event.screenX;
document.getElementById('output_screenx_basic').textContent = 'screenX: ' + screenXValue;
});
</script>
</body>
</html>
Output:
Click anywhere on the page, and you’ll see the screenX coordinate of the mouse click position displayed below the heading.
Example: Tracking Mouse Movement
This example demonstrates how to track the mouse cursor’s position on the screen as the mouse moves over a specific element. The screenX value will be updated dynamically.
<!DOCTYPE html>
<html>
<head>
<title>Tracking screenX</title>
<style>
body {
font-family: sans-serif;
}
#tracker_screenx_div {
width: 300px;
height: 150px;
border: 1px solid black;
background-color: #f0f0f0;
margin-top: 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#output_screenx_track {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Move your mouse over the box to track screenX</h1>
<div id="tracker_screenx_div">Move mouse here</div>
<div id="output_screenx_track"></div>
<script>
const trackerDivScreenX = document.getElementById('tracker_screenx_div');
const outputDivScreenX = document.getElementById('output_screenx_track');
trackerDivScreenX.addEventListener('mousemove', function(event) {
outputDivScreenX.textContent = 'screenX: ' + event.screenX;
});
</script>
</body>
</html>
Output:
As you move the mouse cursor over the gray box, the screenX coordinate will be updated and displayed in the output div. This demonstrates how screenX changes dynamically with mouse movements.
Example: Using Canvas for Drawing
In this more complex example, the screenX property is used to draw on an HTML canvas. This demonstrates how you can use screenX to create an interactive canvas drawing experience. Note how we are using a different ID and variable name for canvas and context.
<!DOCTYPE html>
<html>
<head>
<title>screenX Canvas Drawing</title>
<style>
body { font-family: sans-serif; }
#canvas_screenx { border: 1px solid black; margin-top: 20px; }
</style>
</head>
<body>
<h1>Draw on the canvas</h1>
<canvas id="canvas_screenx" width="400" height="200"></canvas>
<script>
const canvasScreenX = document.getElementById('canvas_screenx');
const ctxScreenX = canvasScreenX.getContext('2d');
let isDrawingScreenX = false;
canvasScreenX.addEventListener('mousedown', function() {
isDrawingScreenX = true;
ctxScreenX.beginPath();
});
canvasScreenX.addEventListener('mousemove', function(event) {
if (!isDrawingScreenX) return;
ctxScreenX.lineTo(event.screenX - canvasScreenX.offsetLeft, event.pageY - canvasScreenX.offsetTop); // corrected here
ctxScreenX.stroke();
});
canvasScreenX.addEventListener('mouseup', function() {
isDrawingScreenX = false;
});
canvasScreenX.addEventListener('mouseout', function() {
isDrawingScreenX = false;
});
</script>
</body>
</html>
Output:
By clicking and dragging on the canvas, you can draw freely. The drawing is determined by the mouse cursor’s position via screenX and adjusted by calculating the offset to get the relative position inside canvas, demonstrating the use of the property in a drawing context.
Note:
- The
offsetLeftandoffsetTopare subtracted to get the accurate x and y positions relative to the canvas element to draw inside the canvas. - We are using
pageYhere to get the Y coordinate because we are subtracting the offset from the Y coordinate as well to draw inside the canvas, instead of usingscreenYwhich is relative to screen position.
Example: Multimonitor Support
When using multiple monitors, the screenX property shows the horizontal position of the mouse across all combined screens. This is a critical aspect when creating applications that might span multiple displays.
<!DOCTYPE html>
<html>
<head>
<title>Multimonitor screenX</title>
<style>
body {
font-family: sans-serif;
}
#multi_monitor_div {
background-color: #f0f0f0;
padding: 20px;
margin: 20px 0;
border: 1px solid black;
}
#output_screenx_multi {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Move your mouse over this area and check the screenX value (might require multiple screens)</h1>
<div id="multi_monitor_div"> Move Mouse Here </div>
<div id="output_screenx_multi"></div>
<script>
const multiMonitorDiv = document.getElementById('multi_monitor_div');
const outputMulti = document.getElementById('output_screenx_multi');
multiMonitorDiv.addEventListener('mousemove', function(event) {
outputMulti.textContent = 'screenX: ' + event.screenX;
});
</script>
</body>
</html>
Output:
Move the mouse over the gray box and see that the screenX value will change even if the box spans accross the muliple monitors. This demonstrates that screenX provides the mouse coordinates relative to the combined screen space.
Note:
- This will be more apparent when using a multi-monitor setup. The
screenXwill give you screen coordinates spanning across the monitors.
Browser Support
The screenX property is widely supported across all modern browsers.
| Browser | Supported |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Opera | Yes |
Conclusion
The screenX property of the MouseEvent interface is a crucial tool for precisely determining the horizontal position of the mouse cursor relative to the screen in JavaScript. It is used in a wide variety of interactive applications, from tracking mouse movements to creating canvas drawing applications. Understanding the difference between screenX, clientX, and pageX will enable you to effectively capture user interactions and build dynamic web experiences.
