How to get relative click coordinates on the target element using JQuery?
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= </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= </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:
Please Login to comment...