Jaka jest różnica między screenX / Y, clientX / Y i pageX / Y?

581

Jaka jest różnica między screenX/ Y, clientX/ Yi pageX/ Y?

Również w przypadku iPada Safari czy obliczenia są podobne jak w przypadku komputera stacjonarnego - LUB istnieje pewna różnica z powodu widoku?

Byłoby wspaniale, gdybyś mógł wskazać mi przykład.

javascript ipad safari mouse-position hmthr
źródło

2

Kolejne demo, które wykorzystuje pięć różnych właściwości (ekran, klient, strona, warstwa, przesunięcie), aby uzyskać współrzędne myszy.

akinuri

504

W JavaScript:

pageX, pageY, screenX, screenY, clientX, I clientYzwraca liczbę, która określa liczbę pikseli fizycznych „CSS” punkt jest od punktu odniesienia. Punkt zdarzenia to miejsce kliknięcia przez użytkownika, punkt odniesienia to punkt w lewym górnym rogu. Te właściwości zwracają poziomą i pionową odległość od tego punktu odniesienia.

pageXi pageY: W
stosunku do lewego górnego rogu w pełni renderowanego obszaru treści w przeglądarce. Ten punkt odniesienia znajduje się poniżej paska adresu URL i przycisku Wstecz w lewym górnym rogu. Ten punkt może znajdować się w dowolnym miejscu w oknie przeglądarki i może faktycznie zmienić lokalizację, jeśli na stronach są osadzone przewijalne strony, a użytkownik przesuwa pasek przewijania.

screenXoraz screenY: W
stosunku do lewego górnego rogu fizycznego ekranu / monitora, ten punkt odniesienia przesuwa się tylko wtedy, gdy zwiększysz lub zmniejszysz liczbę monitorów lub rozdzielczość monitora.

clientXi clientY:
Względem górnej lewej krawędzi obszaru zawartości ( rzutni ) okna przeglądarki. Ten punkt się nie porusza, nawet jeśli użytkownik przesuwa pasek przewijania z poziomu przeglądarki.

Aby zobaczyć, w których przeglądarkach obsługiwane są właściwości:

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

w3schools ma internetowy interpreter i edytor Javascript, dzięki czemu możesz zobaczyć, co robi każdy

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>

Rozwiń fragment kodu

Eric Leschinski
źródło

4

a w jquery offsetX i offsetY są względem kontenera nadrzędnego

Muhammad Umer

2

Link do w3schools wydaje się być dostępny tylko w sekcji odnośników: w3schools.com/jsref/tryit.asp?nazwa_pliku=try_dom_event_clientxy

ważny

1

Myślę, że jest to wprowadzające w błąd lub przynajmniej nieskuteczne wyjaśnienie strony X / strony Y (i w konsekwencji pytanie), ponieważ zawiera odniesienie do paska adresu URL i przycisku Wstecz, podczas gdy lepiej wyjaśnić je pod względem zawartości strony, np. W objaśnieniach wizualnych odpowiedź mówi. Również przykład w3schools nie jest pomocny, ponieważ wypisuje tylko jedną parę x / y i nie ma w nim przewijania, które pokazałoby różnicę.

Robert Monfera

4

Wyjaśnienia PageX / PageY i ClientX / clientY są zamienione. powinieneś to poprawić. wprowadza w błąd

Navpreet Kaur,

1

Myślę, że @NavpreetKaur ma rację. Ta odpowiedź jest przeciwna w odniesieniu do clientX vs. pageX

zhouji

496

Oto zdjęcie wyjaśniające różnicę między pageYi clientY.

strona Y kontra klient Y

To samo odpowiednio dla pageXi clientX.

pageX/Y współrzędne odnoszą się do lewego górnego rogu całej renderowanej strony (w tym części ukrytych przez przewijanie),

podczas clientX/Y współrzędne odnoszą się do lewego górnego rogu widocznej części strony, „widziane” przez okno przeglądarki.

Zobacz demo

Prawdopodobnie nigdy nie będziesz potrzebować screenX/Y

Dan
źródło

21

Świetnie, dzięki za prezentację, wyjaśnia lepiej niż tekst.

Rahul Prasad

Najbardziej podoba mi się wyjaśnienie @ SimoEndre

Pierre

9

chcesz wizualizować, co screenX/Yto jest?

ayjay,

1

Chcę przypisać zdarzenie kliknięcia do określonego prostokątnego obszaru na stronie, więc pageX/pageYnależy go użyć zamiast clientX/clientY?

techie_28,

1

co z prostym xiy? Wyglądają tak samo jak clientX / Y, kiedy próbowałem, ale nie znalazłem na nim ostatecznego odniesienia

zhouji,

117

pageX / Y podaje współrzędne względem <html>elementu w pikselach CSS.
clientX / Y podaje współrzędne względem viewportpikseli CSS.
screenX / Y podaje współrzędne względem screenpikseli urządzenia.

Jeśli chodzi o twoje ostatnie pytanie, czy obliczenia są podobne w przeglądarkach komputerowych i mobilnych ... Aby lepiej zrozumieć - w przeglądarkach mobilnych - musimy wyróżnić dwie nowe koncepcje: rzutnię układu i rzutnię wizualną . Wizualna rzutnia to część strony, która jest obecnie wyświetlana na ekranie. Rzutnia układu jest synonimem pełnej strony renderowanej w przeglądarce na pulpicie (ze wszystkimi elementami, które nie są widoczne w bieżącej rzutni).

W przeglądarkach mobilnych pageXi pageYnadal są względem strony w pikselach CSS, dzięki czemu można uzyskać współrzędne myszy względem strony dokumentu. Z drugiej strony clientXi clientYzdefiniuj współrzędne myszy w stosunku do rzutni .

Istnieje inny wątek przepełnienia stosu dotyczący różnic między rzutnią wizualną a rzutnią układu: Różnica między rzutnią wizualną a rzutnią układu?

Kolejny dobry zasób: http://www.quirksmode.org/mobile/viewports2.html

Endre Simo
źródło

27

Pomogło mi dodanie wydarzenia bezpośrednio do tej strony i samodzielne kliknięcie! Otwórz konsolę w narzędziach dla programistów / Firebug itp. I wklej to:

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

Rozwiń fragment kodu

Za pomocą tego fragmentu możesz śledzić pozycję kliknięcia podczas przewijania, przesuwania okna przeglądarki itp.

Zwróć uwagę, że pageX / Y i clientX / Y są takie same, gdy przewijasz do samego końca!

ognisty zachód słońca
źródło

5

Różnica między nimi będzie zależeć w dużej mierze od przeglądarki, do której się obecnie odwołujesz. Każdy z nich implementuje te właściwości inaczej lub wcale. Quirksmode ma świetną dokumentację dotyczącą różnic przeglądarki w odniesieniu do standardów W3C, takich jak zdarzenia DOM i JavaScript.

Dominic Barnes
źródło

4

Twoja odpowiedź jest dobra, ale wkrótce stanie się nieaktualna quirksmode.org/mobile/tableViewport_desktop.html

Dan

Jaka jest różnica między screenX / Y, clientX / Y i pageX / Y?

Odpowiedzi:

Zobacz demo