The MouseEvent screenX property is used for returning the horizontal coordinate of the mouse pointer whenever this event is triggered. It returns a number which represents the horizontal distance of the mouse pointer relative to the screen in pixels.
The MouseEvent screenX property is a read-only property and it returns a number which represents the horizontal coordinate of the mouse pointer in pixels.
Syntax :
event.screenX
Below program illustrate the MouseEvent screenX property :
Program: Finding out the horizontal coordinates of the mouse pointer, relative to the screen, when the mouse button is clicked on an element.
<!DOCTYPE html> <html>
<head>
<title>MouseEvent screenX Property in HTML</title>
<style>
h1
{
color:green;
}
h2
{
font-family: Impact;
}
body
{
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>MouseEvent screenX Property</h2>
<p onclick="coord(event)">
Click somewhere in the paragraph to
get the x(horizontal) coordinates of
the mouse pointer.
</p>
<p id="test"></p>
<script>
function coord(event)
{
var x = event.screenX;
var coords = " X coords: " + x;
document.getElementById("test").innerHTML = coords;
}
</script>
</body>
</html>
|
Output:
After clicking the button
Supported Web Browsers
- Opera
- Internet Explorer
- Google Chrome
- Firefox
- Apple Safari