Skip to content
Related Articles

Related Articles

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <script 
    </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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <script
    </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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :