La diferencia entre las propiedades screenX/Y, clientX/Y y pageX/Y de JavaScript suele confundirse. Cada una de las propiedades devuelve un valor que indica el número de píxeles físicos de diferentes puntos de referencia. Las diferencias y el caso de uso de estas propiedades se describen a continuación:
1. La propiedad screenX y screenY: screenX y screenY son propiedades de solo lectura que proporcionan coordenadas horizontales y verticales respectivamente en relación con las coordenadas globales o de pantalla. Devuelve un valor de coma flotante doble que denota la coordenada.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>The screenX and screenY property</h3>
<p>
Click on the button to open a new
window with the given parameters
and check the screenX and screenY
property.
</p>
<button onclick="getScreenXY()">
Open Window
</button>
<script>
function getScreenXY() {
// Open a new window with the
// left at 400 and the top at 200
var newWindow = window.open("", "newWindow",
"left=400, top=200, width=450, height=300");
newWindow.document.write(
"<p> This is the example window to" +
" show the usage of screenX/Y");
// Show the screenX and screenY property
newWindow.document.write(
"<br>screenX: " + newWindow.screenX
);
newWindow.document.write(
"<br>screenY: " + newWindow.screenY + "</p>"
);
}
</script>
</body>
</html>
Producción:
2. La propiedad clientX y clientY: clientX y clientY son propiedades de solo lectura que proporcionan la coordenada horizontal y vertical respectivamente dentro del área de contenido, o la ventana gráfica de la ventana del navegador.
Por ejemplo, si el usuario se desplaza verticalmente hacia abajo en la página web y hace clic en el inicio de la ventana gráfica, clientY siempre devolverá 0. Devuelve un valor de coma flotante doble que indica la coordenada.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>The clientX and clientY property</h3>
<p>
Click anywhere in this rectangle to
see the usage of the clientX and
clientY properties
</p>
<div onclick="showCoordinates(event)"></div>
<p id="display"></p>
<script>
function showCoordinates(event) {
var x = event.clientX;
var y = event.clientY;
var coordinates = "clientX: " +
x + ", clientY: " + y;
document.getElementById("display")
.innerHTML = coordinates;
}
</script>
</body>
</html>
Producción:
3. La propiedad pageX y pageY: PageX y pageY son propiedades de solo lectura que devuelven las coordenadas horizontales y verticales respectivamente en relación con el borde izquierdo de todo el documento, es decir, en relación con el borde izquierdo del área de contenido totalmente representada en la ventana del navegador y justo debajo de la barra de URL.
Por ejemplo, si el usuario se desplaza hacia abajo en la página, aún devolverá las coordenadas relativas a la parte superior de la página, independientemente de la cantidad de desplazamiento.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>The pageX and pageY property</h3>
<p>
Mouse over the rectangle see the
usage of the pageX and pageY
properties
</p>
<div onmousemove="showCoordinates(event)"
onmouseout="clearCoordinates()">
</div>
<p id="display"></p>
<script>
function showCoordinates(event) {
var x = event.pageX;
var y = event.pageY;
var coordinates = "pageX: " +
x + ", pageY: " + y;
document.getElementById("display")
.innerHTML = coordinates;
}
function clearCoordinates() {
document.getElementById("display")
.innerHTML = "";
}
</script>
</body>
</html>
Producción:
