Qual è la differenza tra screenX / Y, clientX / Y e pageX / Y?

581

Qual è la differenza tra screenX/ Y, clientX/ Ye pageX/ Y?

Anche per iPad Safari, i calcoli sono simili a quelli sul desktop — O c'è qualche differenza a causa del viewport?

Sarebbe bello se potessi indicarmi un esempio.

— hmthr
fonte

2

Un'altra demo che utilizza cinque diverse proprietà (schermo, client, pagina, layer, offset) per ottenere le coordinate del mouse.

— akinuri,

504

In JavaScript:

pageX, pageY, screenX, screenY, clientX, E clientYrestituisce un numero che indica il numero di “pixel CSS” fisici un punto è dal punto di riferimento. Il punto dell'evento è dove l'utente ha fatto clic, il punto di riferimento è un punto in alto a sinistra. Queste proprietà restituiscono la distanza orizzontale e verticale da quel punto di riferimento.

pageXe pageY:
relativo alla parte superiore sinistra dell'area di contenuto con rendering completo nel browser. Questo punto di riferimento si trova sotto la barra dell'URL e il pulsante Indietro in alto a sinistra. Questo punto può trovarsi ovunque nella finestra del browser e può effettivamente cambiare posizione se ci sono pagine scorrevoli incorporate incorporate all'interno di pagine e l'utente sposta una barra di scorrimento.

screenXe screenY:
rispetto alla parte superiore sinistra dello schermo / monitor fisico, questo punto di riferimento si sposta solo se si aumenta o diminuisce il numero di monitor o la risoluzione del monitor.

clientXe clientY:
relativo al bordo superiore sinistro dell'area del contenuto ( il riquadro di visualizzazione ) della finestra del browser. Questo punto non si sposta anche se l'utente sposta una barra di scorrimento all'interno del browser.

Per una visualizzazione su quali browser supportano quali proprietà:

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

w3schools ha un interprete e un editor Javascript online in modo da poter vedere cosa fanno ciascuno

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>

Espandi frammento

— Eric Leschinski
fonte

4

e in jquery offsetX e offsetY sono relativi al contenitore principale

— Muhammad Umer

2

Il link a w3schools sembra essere disponibile solo nella sezione di riferimento ora: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

— valido il

1

Penso che sia una spiegazione fuorviante o almeno inefficace per pageX / pageY (e, di conseguenza, la domanda) perché fa un riferimento alla barra dell'URL e al pulsante Indietro mentre è meglio spiegato in termini di contenuto della pagina come ad esempio nella spiegazione visiva la risposta dice. Inoltre, l'esempio di w3schools non è utile in quanto produce solo una coppia x / y e non è presente alcuno scorrimento che dimostrerebbe la differenza.

— Robert Monfera,

4

Le spiegazioni di PageX / PageY e ClientX / clientY sono scambiate. dovresti correggerlo. è fuorviante

— Navpreet Kaur il

1

Penso che @NavpreetKaur abbia ragione. Questa risposta è contraria per quanto riguarda clientX vs pageX

— zhouji,

498

Ecco un'immagine che spiega la differenza tra pageYe clientY.

pageY vs clientY

Lo stesso per pageXe clientX, rispettivamente.

pageX/Y le coordinate sono relative all'angolo in alto a sinistra dell'intera pagina renderizzata (comprese le parti nascoste mediante scorrimento),

mentre le clientX/Ycoordinate sono relative all'angolo in alto a sinistra della parte visibile della pagina, "viste" attraverso la finestra del browser.

Vedi la demo

Probabilmente non ne avrai mai bisogno screenX/Y

— Dan
fonte

21

Fantastico, grazie per la demo, spiega meglio del testo.

— Rahul Prasad,

Mi piace la spiegazione di @SimoEndre al meglio

— Pierre,

9

cura di visualizzare cos'è screenX/Y?

— ajjay

1

Voglio associare un evento clic su una particolare area rettangolare della pagina, quindi pageX/pageYdovrebbe essere usato al posto di clientX/clientY?

— techie_28,

1

che dire della semplice xey? Sembrano uguali a clientX / Y quando l'ho provato ma non ho trovato un riferimento definitivo su di esso

— zhouji

117

pageX / Y fornisce le coordinate relative <html>all'elemento in pixel CSS.
clientX / Y fornisce le coordinate relative ai viewportpixel CSS.
screenX / Y fornisce le coordinate relative ai screenpixel del dispositivo.

Per quanto riguarda la tua ultima domanda se i calcoli sono simili sui browser desktop e mobile ... Per una migliore comprensione - sui browser mobili - dobbiamo differenziare due nuovi concetti: il viewport del layout e il viewport visivo . Il viewport visivo è la parte della pagina attualmente visualizzata sullo schermo. La finestra di layout è sinonimo di una pagina intera visualizzata su un browser desktop (con tutti gli elementi che non sono visibili nella finestra corrente).

Sui browser mobili, i pageXe pageYsono ancora relativi alla pagina in pixel CSS in modo da poter ottenere le coordinate del mouse relative alla pagina del documento. D'altra parte clientXe clientYdefinire le coordinate del mouse in relazione alla finestra visiva .

C'è un altro thread stackover qui per quanto riguarda le differenze tra la vista visiva e la vista layout: differenza tra vista visiva e vista layout?

Un'altra buona risorsa: http://www.quirksmode.org/mobile/viewports2.html

— Endre Simo
fonte

27

Ciò che mi ha aiutato è stato quello di aggiungere un evento direttamente a questa pagina e fare clic da solo! Apri la tua console in strumenti per sviluppatori / Firebug ecc. E incollalo:

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

Espandi frammento

Con questo frammento, è possibile tenere traccia della posizione dei clic mentre si scorre, si sposta la finestra del browser, ecc.

Notare che pageX / Y e clientX / Y sono gli stessi quando si scorre fino in cima!

— fierysunset
fonte

5

La differenza tra queste dipenderà in gran parte dal browser a cui ti riferisci attualmente. Ognuno implementa queste proprietà in modo diverso o per niente. Quirksmode ha un'ottima documentazione relativa alle differenze del browser rispetto agli standard W3C come DOM e JavaScript Events.

— Domenico Barnes
fonte

4

La tua risposta è buona, ma diventerà presto obsoleta quirksmode.org/mobile/tableViewport_desktop.html

— Dan