Aquí está el código para obtener las coordenadas del elemento. Aquí se analizan 2 métodos, uno calcula la posición relativa a su padre, mientras que otro calcula la posición relativa al documento.
Enfoque 1:
- Adjunte el evento de clic al elemento.
- Llame a una función anónima cuando ocurra un evento.
- Calcule la X relativa al elemento principal restando la propiedad Offset().left de la propiedad pageX.
- Del mismo modo, calcule la Y en relación con el elemento principal restando la propiedad Offset().top de la propiedad pageY.
Ejemplo 1: este ejemplo sigue el enfoque discutido anteriormente para calcular la posición relativa de la ubicación con respecto a su elemento principal.
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Adjunte el evento de clic al elemento.
- Llame a una función anónima cuando ocurra un evento.
- Calcule la X relativa al documento por la propiedad pageX.
- De manera similar, calcule la propiedad Y relativa al documento por página Y.
Ejemplo 2: este ejemplo sigue el enfoque discutido anteriormente para calcular la posición relativa de la ubicación con respecto al documento.
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA