Skip to content
Related Articles

Related Articles

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
My Personal Notes arrow_drop_up
Recommended Articles
Page :