¿Cuál es la diferencia entre screenX/Y, clientX/Y y pageX/Y?

¿Cuál es la diferencia entre screenX/ Y, clientX/ Yy pageX/?Y ?

También para iPad Safari, ¿los cálculos son similares a los del escritorio, O hay alguna diferencia debido a la ventana gráfica?

Sería genial si pudieras indicarme un ejemplo.

May 20 '11 21:05 hmthr

Aquí hay una imagen que explica la diferencia entre pageYy clientYy screenY.

páginaY vs clienteY vs pantallaY

Lo mismo para pageXy clientXy screenX, respectivamente.

pageX/Ylas coordenadas son relativas a la esquina superior izquierda de toda la página renderizada (incluidas las partes ocultas al desplazarse),

mientras que clientX/Ylas coordenadas son relativas a la esquina superior izquierda de la parte visible de la página, "vista" a través de la ventana del navegador.

screenX/Yson relativos a la pantalla física.

Ver demostración

o prueba este fragmento:

Mostrar fragmento de código

document.addEventListener('DOMContentLoaded', _ => {
  const info = document.getElementById('info');
  const updateInfo = event => {
    const { clientX, clientY, pageX, pageY } = event;
    info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br />  pageX: ${pageX} pageY: ${pageY}`;
  };
  document.addEventListener('mouseover', updateInfo);
  document.addEventListener('mousemove', updateInfo);
});

body {
  border: 1px solid red;
  min-height: 10000px;
  margin: 10px;
}
#info {
  border: 1px solid blue;
  position: fixed;
  top: 80px;
  left: 40px;
}

<h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3>
<div id="info"></div>

Expandir fragmento

Nota : probablemente nunca necesitarásscreenX/Y

Jan 30 '2014 09:01 Dan

En JavaScript:

pageX, pageY, screenX, screenY, clientXy clientYdevuelve un número que indica el número de “píxeles CSS” lógicos que tiene un punto de evento desde el punto de referencia. El punto de evento es donde el usuario hizo clic y el punto de referencia es un punto en la parte superior izquierda. Estas propiedades devuelven la distancia horizontal y vertical del punto del evento desde ese punto de referencia.

pageXy pageY:
en relación con la parte superior izquierda del área de contenido completamente renderizado en el navegador. Este punto de referencia se encuentra debajo de la barra de URL y el botón Atrás en la parte superior izquierda. Este punto podría estar en cualquier parte de la ventana del navegador y, de hecho, puede cambiar de ubicación si hay páginas desplazables incrustadas dentro de las páginas y el usuario mueve una barra de desplazamiento.

screenXy screenY:
En relación con la parte superior izquierda de la pantalla/monitor físico, este punto de referencia solo se mueve si aumenta o disminuye la cantidad de monitores o la resolución del monitor.

clientXy clientY:
relativo al borde superior izquierdo del área de contenido ( la ventana gráfica ) de la ventana del navegador. Este punto no se mueve incluso si el usuario mueve una barra de desplazamiento desde el navegador.

Para ver qué navegadores admiten qué propiedades:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

<script>
    function showCoordinates(event){
        var x = event.clientX;
        var y = event.clientY;
        alert(`X coordinates: ${x}, Y coordinates: ${y}`);
    }
</script>
<p onmousedown="showCoordinates(event)">
    Click this paragraph, and an alert box will show the x
    and y coordinates of the mouse relative to the viewport
</p>

Expandir fragmento

Feb 17 '2012 21:02 Eric Leschinski

pageX/Y proporciona las coordenadas relativas al <html>elemento en píxeles CSS.
clientX/Y proporciona las coordenadas relativas a los viewportpíxeles en CSS.
screenX/Y proporciona las coordenadas relativas a los screenpíxeles del dispositivo.

Con respecto a su última pregunta, si los cálculos son similares en los navegadores de escritorio y móviles... Para una mejor comprensión, en los navegadores móviles, debemos diferenciar dos conceptos nuevos: la ventana gráfica de diseño y la ventana gráfica visual . La ventana gráfica es la parte de la página que se muestra actualmente en pantalla. La ventana gráfica de diseño es sinónimo de una página completa representada en un navegador de escritorio (con todos los elementos que no son visibles en la ventana gráfica actual).

En los navegadores móviles, pageXy pageYsiguen siendo relativos a la página en píxeles CSS para que pueda obtener las coordenadas del mouse relativas a la página del documento. Por otro lado clientX, clientYdefina las coordenadas del mouse en relación con la ventana gráfica .

Hay otro hilo de stackoverflow aquí sobre las diferencias entre la ventana gráfica y la ventana gráfica de diseño: ¿ Diferencia entre la ventana gráfica visual y la ventana gráfica de diseño?

Otro buen recurso: http://www.quirksmode.org/mobile/viewports2.html

Jul 01 '2012 08:07 Endre Simo

No me gustan ni entiendo las cosas que se pueden explicar visualmente, con palabras.

ingrese la descripción de la imagen aquí

Aug 27 '2020 08:08 Soner from The Ottoman Empire

¡Lo que me ayudó fue agregar un evento directamente a esta página y hacer clic yo mismo! Abre tu consola en herramientas de desarrollo/Firebug, etc. y pega esto:

document.addEventListener('click', function(e) {
  console.log(
    'page: ' + e.pageX + ',' + e.pageY,
    'client: ' + e.clientX + ',' + e.clientY,
    'screen: ' + e.screenX + ',' + e.screenY)
}, false);

Click anywhere

Expandir fragmento

Con este fragmento, puede realizar un seguimiento de la posición de su clic mientras se desplaza, mueve la ventana del navegador, etc.

¡Observe que páginaX/Y y clienteX/Y son iguales cuando se desplaza hasta la parte superior!

Aug 11 '2014 04:08 fierysunset