如何使用 JQuery 获取目标元素上的相对点击坐标？

这是获取元素坐标的代码，这里讨论了两种方法，一种是计算与父元素的相对位置，另一种是计算与文档的相对位置。

方法一：

• 将单击事件附加到元素。
• 事件发生时调用匿名函数。
• 通过从 pageX 属性中减去 Offset().left 属性来计算相对于父元素的 X。
• 同样，通过从 pageY 属性中减去 Offset().top 属性来计算相对于父元素的 Y。

示例 1：此示例遵循上面讨论的方法来计算位置与其父元素的相对位置。

  

    
        How to get relative click coordinates
      on the target element using JQuery?
    
    
    
    
        h1 {
            border: 1px solid green;
        }
          
        #GFG_UP {
            border: 1px solid green;
        }
          
        button {
            border: 1px solid green;
        }
    

  

      
            GeeksForGeeks  
        
    
    
    
    
    
        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;
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 将单击事件附加到元素。
• 事件发生时调用匿名函数。
• 通过 pageX 属性计算相对于文档的 X。
• 同样，通过 pageY 属性计算相对于文档的 Y。

示例 2：此示例遵循上面讨论的方法来计算位置与文档的相对位置。

  

    
        How to get relative click coordinates
      on the target element using JQuery?
    
    
  
    
        h1 {
            border: 1px solid green;
        }
          
        #GFG_UP {
            border: 1px solid green;
        }
          
        button {
            border: 1px solid green;
        }
    

  

      
            GeeksForGeeks  
        
    
    
    
    
    
        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;
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：