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

581

¿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 señalarme un ejemplo.

javascript ipad safari mouse-position hmthr
fuente
2
Otra demostración que utiliza cinco propiedades diferentes (pantalla, cliente, página, capa, desplazamiento) para obtener las coordenadas del mouse.
akinuri

Respuestas:

504

En JavaScript:

pageX, pageY, screenX, screenY, clientX, Y clientYdevuelve un número que indica el número de “píxeles CSS” físicas un punto es desde el punto de referencia. El punto de evento es donde el usuario hizo clic, el punto de referencia es un punto en la esquina superior izquierda. Estas propiedades devuelven la distancia horizontal y vertical desde ese punto de referencia.

pageXy pageY: en
relación con la parte superior izquierda del área de contenido totalmente representada en el navegador. Este punto de referencia está debajo de la barra de URL y el botón Atrás en la esquina superior izquierda. Este punto podría estar en cualquier lugar de la ventana del navegador y 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 el número 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 una visualización en qué navegadores admiten qué propiedades:

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

w3schools tiene un intérprete y editor de Javascript en línea para que pueda ver lo que cada uno hace

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
  var x=event.clientX;
  var y=event.clientY;
  alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>

<body>

<p onmousedown="show_coords(event)">Click this paragraph, 
and an alert box will alert the x and y coordinates 
of the mouse pointer.</p>

</body>
</html>
Expandir fragmento

Eric Leschinski
fuente
44
y en jquery offsetX y offsetY son relativos al contenedor padre
Muhammad Umer
2
El enlace a w3schools parece estar solo disponible en la sección de referencia ahora: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
válido del
1
Creo que es una explicación engañosa o al menos ineficaz para la página X / páginaY (y, en consecuencia, la pregunta) porque hace referencia a la barra de URL y al botón Atrás, mientras que se explica mejor en términos del contenido de la página, como en la explicación visual. la respuesta dice Además, el ejemplo de w3schools no es útil, ya que solo genera un par x / y, y no hay desplazamiento que demuestre la diferencia.
Robert Monfera
44
Las explicaciones de PageX / PageY y ClientX / clientY se intercambian. deberías corregirlo. es engañoso
Navpreet Kaur
1
Creo que @NavpreetKaur tiene razón. Esta respuesta es opuesta con respecto a clientX vs pageX
zhouji
498

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

pageY vs clientY

Lo mismo para pageXy clientX, respectivamente.

pageX/Y las coordenadas son relativas a la esquina superior izquierda de toda la página renderizada (incluidas las partes ocultas por desplazamiento),

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

Ver demo

Probablemente nunca necesites screenX/Y

Dan
fuente
21
Impresionante, gracias por la demostración, explica mejor que el texto.
Rahul Prasad
Me gusta la explicación de @ SimoEndre la mejor
Pierre
99
cuidado de visualizar lo que screenX/Yes?
Ayjay
1
Quiero vincular un evento de clic en un área rectangular particular de la página, ¿ pageX/pageYdebería usarse en lugar de clientX/clientY?
techie_28
1
¿Qué pasa con la simple xey? Parecen lo mismo que clientX / Y cuando lo probé pero no encontré una referencia definitiva sobre él
zhouji
117
  1. pageX / Y proporciona las coordenadas relativas al <html>elemento en píxeles CSS.
  2. clientX / Y proporciona las coordenadas relativas a los viewportpíxeles en CSS.
  3. screenX / Y proporciona las coordenadas relativas a los screenpíxeles en el 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, necesitamos diferenciar dos nuevos conceptos: la ventana gráfica de diseño y la ventana visual . La vista visual 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 pageYtodavía son 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, clientXy clientYdefinir las coordenadas del mouse en relación con la ventana visual .

Hay otro hilo de stackoverflow aquí con respecto a las diferencias entre la vista visual y la vista de diseño: ¿ Diferencia entre la vista visual y la vista de diseño?

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

Endre Simo
fuente
27

¡Lo que me ayudó fue agregar un evento directamente a esta página y hacer clic por mí mismo! Abra su consola en herramientas de desarrollador / Firebug, etc. y pegue 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 rastrear su posición de clic a medida que se desplaza, mueve la ventana del navegador, etc.

¡Tenga en cuenta que pageX / Y y clientX / Y son iguales cuando se desplaza hasta la parte superior!

fierysunset
fuente
5

La diferencia entre ellos dependerá en gran medida del navegador al que se refiera actualmente. Cada uno implementa estas propiedades de manera diferente, o nada en absoluto. Quirksmode tiene una excelente documentación sobre las diferencias del navegador con respecto a los estándares W3C, como los eventos DOM y JavaScript.

Dominic Barnes
fuente
44
Su respuesta es buena, pero pronto quedará
Dan