jQuery | event.pageX property with Examples

Last Updated : 23 May, 2019

The event.pageX is an inbuilt property in jQuery which is used to find the position of the mouse pointer relative to the left edge of the document.
Syntax:

event.pageX

Parameter: It does not accept any parameter because it is a property not a function.
Return Value: It returns the position of the mouse pointer relative to the left edge of the document.
jQuery code to show the working of event.pageX property:
Code #1:
In the below code, top left position of the mouse-pointer is showing.

<html>
  
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        <!-- jQuery code to demonstrate the x-coordinate of mouse pointer-->
        $(document).ready(function() {
            $(document).mousemove(function(event) {
                $("span").text("X= " + event.pageX);
            });
        });
    </script>
</head>
  
<body>
    <!-- top left position of the pointer will show here -->
    <p>X co-ordinate position of the mouse-pointer is : <span></span></p>
</body>
  
</html>

Output:

Code #2:
In the below code, top right corner position of the mouse-pointer is showing.

<html>
  
<head>
    <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        <!-- jQuery code o demonstrate the mouse pointer position -->
        $(document).ready(function() {
            $(document).mousemove(function(event) {
                $("span").text("X= " + event.pageX);
            });
        });
    </script>
</head>
  
<body>
    <!-- top right corner position of the pointer will show here -->
    <p>X co-ordinate position of the mouse-pointer is : <span></span></p>
</body>
  
</html>

Output:

My Personal Notes

Related Articles