Last Updated : 01 Oct, 2024
The mouse event clientX property returns the horizontal coordinate (X-axis) of the mouse pointer in relation to the viewport when a mouse event occurs. It captures the mouse's position without considering any scroll offset.
Syntax:event.clientX
Return Value: clientX returns the mouse pointer's X-coordinate relative to the viewport.
Example: The below example Finds the X-coordinates of the mouse pointer when the mouse clicked anywhere in viewport.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MouseEvent.clientX Example</title>
</head>
<body>
<h3>Click anywhere to get the mouse X position</h3>
<p id="output">Mouse X position will appear here.</p>
<script>
document.addEventListener('click', function (event) {
const mouseX = event.clientX;
document.getElementById('output').textContent = `Mouse X: ${mouseX}px`;
});
</script>
</body>
</html>
Output:
Mouse Event Supported Web Browsers:RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4