jQuery event.pageX Property

jQuery | event.pageX Property: Learn about the jQuery event.pageX Property with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 28, 2022

event.pageX Property

An event is an action occurred by the user. Therefore, many functions and methods can be set according to those actions performed. When these actions are defined for an event interface, we term those as the event properties. There are various predefined event properties in jQuery. Here, let's discuss the event.pageX Property.

The event.pageX is a built-in property in jQuery. This property helps to get the current position of the mouse pointer relative to the left edge of the document. It can be the web page (document) or some selected area within the document also. We can use any of the needed mouse pointer methods in jQuery and further find out its position in the document using event.pageX property. Since, this clearly states 'pageX', hence, it will return the pointer value along the x-axis of the document.

event.pageX Property Syntax

event.pageX

Since this is a property, it does not accept any parameters. Generally, event.pageX is used with event.pageY to get an appropriate result. The below example helps us to know the position of the mouse pointer inside the div box specifically.

jQuery event.pageX Property Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
      #box{
      height:150px;
      width: 300px;
      border:solid 2px olive;
      text-align: center;
      }
    </style>
  </head>
  
  <body>
    <h2>jQuery Event - Page X Property</h2>
    <p>Move the mouse pointer inside the box and get its position relative to left edge of the box.</p>
    <hr>
    <div id="box">
      <p>Welcome to Include Help</p>
      <p>This is jQuery tutorial for events.</p>
      <p>Thanks for visiting</p>
    </div>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('div#box').mousemove(function(event){
            $('h3').html('Mouse Pointer: ' + event.pageX);
        })
        $('div#box').mouseleave(function(){
            $('h3').html('Mouse Pointer: 0');
        })
    });
  </script>
</html>

Output:

jQuery event.currentTarget Property

jQuery event.pageY Property

Comments and Discussions!

Load comments ↻