HTML | DOM MouseEvent screenX Property
Last Updated :
31 Jan, 2019
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
Share your thoughts in the comments
Please Login to comment...