How to get relative click coordinates on the target element using JQuery? - GeeksforGeeks

06 Sep, 2019
Here is the code to get the coordinates of the element, Here 2 methods are discussed one is calculating the relative position to its parent while another is calculating the relative position to the document.
Approach 1:
Attach the click event to the element.
Call an anonymous function when an event occurs.
Calculate the X relative to the parent element by subtracting the Offset().left property from the pageX property.
Similarly, calculate the Y relative to parent element by subtracting the Offset().top property from the pageY property.
Example 1: This example follows the approach discussed above to calculate the location’s relative position to its parent element.
<!DOCTYPE HTML><html>  <head>    <title>        How to get relative click coordinates      on the target element using JQuery?    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <style>        h1 {            border: 1px solid green;        }                  #GFG_UP {            border: 1px solid green;        }                  button {            border: 1px solid green;        }    </style></head>  <body style="text-align:center;" id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP" style="font-size: 15px;              font-weight: bold;">    </p>    <p id="GFG_DOWN" style="color:green;              font-size: 20px;               font-weight: bold;">    </p>    <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");        var x, y;        el_up.innerHTML = "Click inside any bordered element to get the"+         "click coordinates of that particular location with respect"+        "to its parent element ";        $('h1').click(function(e) {            // element that has been clicked.            var elm = $(this);              // getting the respective            x = e.pageX - elm.offset().left;              // coordinates of location.            y = e.pageY - elm.offset().top;            gfg_Run();        });        $('#GFG_UP').click(function(e) {            var elm = $(this);            // getting the respective            x = e.pageX - elm.offset().left;              // coordinates of location.            y = e.pageY - elm.offset().top;            gfg_Run();        });          function gfg_Run() {            el_down.innerHTML = "X- " + x + "<br>Y- " + y;        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Attach the click event to the element.
Call an anonymous function when event occurs.
Calculate the X relative to document by pageX property.
Similarly, calculate the Y relative to document by pageY property.
Example 2: This example follows the approach discussed above to calculate the location’s relative position to the document.
<!DOCTYPE HTML><html>  <head>    <title>        How to get relative click coordinates      on the target element using JQuery?    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <style>        h1 {            border: 1px solid green;        }                  #GFG_UP {            border: 1px solid green;        }                  button {            border: 1px solid green;        }    </style></head>  <body style="text-align:center;" id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP"       style="font-size: 15px;               font-weight: bold;">    </p>    <p id="GFG_DOWN"        style="color:green;              font-size: 20px;               font-weight: bold;">    </p>    <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");        var x, y;        el_up.innerHTML = "Click inside any bordered element "+          "to get the click coordinates of that particular "+          "location with respect to document";        $('h1').click(function(e) {                      // element that has been clicked.            var elm = $(this);                       // getting the respective            x = e.pageX;                       // coordinates of location.            y = e.pageY;             gfg_Run();        });        $('#GFG_UP').click(function(e) {            // element that has been clicked.            var elm = $(this);              // getting the respective            x = e.pageX;              // coordinates of location.            y = e.pageY;            gfg_Run();        });          function gfg_Run() {            el_down.innerHTML = "X- " + x + "<br>Y- " + y;        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to Show and Hide div elements using radio buttons?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills