javascript - event - ¿Cuál es la diferencia entre screenX/Y, clientX/Y y pageX/Y?
on touch js (5)
- pageX / Y proporciona las coordenadas relativas al elemento
<html>en píxeles CSS. - clientX / Y proporciona las coordenadas relativas a la
viewporten píxeles CSS. - screenX / Y proporciona las coordenadas relativas a la
screenen pí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, necesitamos diferenciar dos nuevos conceptos: la vista gráfica de diseño y la ventana visual . La vista 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 están visibles en la ventana gráfica actual).
En los navegadores móviles, la pageX y la pageY siguen siendo relativas a la página en píxeles CSS, por lo que puede obtener las coordenadas del mouse relativas a la página del documento. Por otro lado, clientX y clientY definen las coordenadas del mouse en relación con la ventana gráfica .
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
¿Cuál es la diferencia entre screenX / Y, clientX / Y y pageX / Y?
También para iPad Safari, ¿son los cálculos similares a los de un escritorio O hay alguna diferencia debido a la ventana gráfica?
Sería genial si pudiera señalarme un ejemplo.
¡Lo que me ayudó fue agregar un evento directamente a esta página y hacer clic por mí 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
Con este fragmento, puede hacer un seguimiento de 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!
Aquí hay una imagen que explica la diferencia entre pageY y clientY .
Lo mismo para pageX y clientX , respectivamente.
pageX/Y coordenadas de la página pageX/Y son relativas a la esquina superior izquierda de toda la página renderizada (incluidas las partes ocultas por el desplazamiento),
mientras que las coordenadas de clientX/Y son relativas a la esquina superior izquierda de la parte visible de la página, "visto" a través de la ventana del navegador.
Ver demo
Probablemente nunca necesites screenX/Y
La diferencia entre estos dependerá en gran medida de a qué navegador se refiera actualmente. Cada uno implementa estas propiedades de manera diferente, o no lo hace en absoluto. Quirksmode tiene una gran documentación con respecto a las diferencias del navegador en lo que respecta a los estándares W3C como los eventos DOM y JavaScript.
En JavaScript:
pageX, pageY, screenX, screenY, clientX y clientY devuelven un número que indica el número de "píxeles css" físicos desde el punto de referencia. El punto de evento es donde el usuario hizo clic, el punto de referencia es un punto en la parte superior izquierda. Estas propiedades devuelven la distancia horizontal y vertical desde ese punto de referencia.
pageX y pageY:
Relativo a la parte superior izquierda del área de contenido completamente renderizado en el navegador. Este punto de referencia se encuentra debajo de la barra url y el botón Atrás en la parte superior izquierda. Este punto podría estar en cualquier lugar de la ventana del navegador y, de hecho, puede cambiar la ubicación si hay páginas de desplazamiento incrustadas incrustadas dentro de las páginas y el usuario mueve una barra de desplazamiento.
screenX y 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.
clientX y 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 un visual en qué navegadores soportan 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 puedas ver lo que 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>