极客教程如何使用JQuery获得目标元素的相对点击坐标
这里是获取元素坐标的代码，这里讨论了2种方法，一种是计算与父级的相对位置，另一种是计算与文档的相对位置。
步骤 1:
- 将点击事件附加到该元素上。
- 当一个事件发生时，调用一个匿名函数。
- 通过从pageX属性中减去Offset().left属性，计算出相对于父元素的X。
- 同样地，通过从pageY属性中减去Offset().top属性来计算相对于父元素的Y。
例子1：这个例子按照上面讨论的方法来计算位置与父元素的相对位置。
<!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>
输出:
- 在点击按钮之前。
- 点击该按钮后。
步骤 2:
- 将点击事件附加到该元素上。
- 当事件发生时调用一个匿名函数。
- 通过pageX属性计算出相对于文档的X。
- 同样地，通过pageY属性计算相对于文档的Y。
例子2：这个例子沿用了上面讨论的方法，计算出位置与文件的相对位置。
<!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>
输出:
- 在点击按钮之前。
- 点击该按钮后。
