Was ist der Unterschied zwischen screenX / Y, clientX / Y und pageX / Y?

581

Was ist der Unterschied zwischen screenX/ Y, clientX/ Yund pageX/Y ?

Sind die Berechnungen auch für iPad Safari ähnlich wie auf dem Desktop - oder gibt es aufgrund des Ansichtsfensters einen Unterschied?

Es wäre großartig, wenn Sie mir ein Beispiel geben könnten.

javascript ipad safari mouse-position hmthr
quelle
2
Eine weitere Demo , die fünf verschiedene Eigenschaften (Bildschirm, Client, Seite, Ebene, Versatz) verwendet, um die Mauskoordinaten abzurufen.
Akinuri

Antworten:

504

In JavaScript:

pageX, pageY, screenX, screenY, clientX, Und clientYliefert eine Zahl , die die Anzahl der physischen „CSS Pixel“ ein Punkt anzeigt , von dem Referenzpunkt. Der Ereignispunkt ist der Punkt, auf den der Benutzer geklickt hat. Der Referenzpunkt ist ein Punkt oben links. Diese Eigenschaften geben den horizontalen und vertikalen Abstand von diesem Referenzpunkt zurück.

pageXund pageY:
Relativ oben links im vollständig gerenderten Inhaltsbereich im Browser. Dieser Referenzpunkt befindet sich unterhalb der URL-Leiste und der Zurück-Schaltfläche oben links. Dieser Punkt kann sich an einer beliebigen Stelle im Browserfenster befinden und die Position tatsächlich ändern, wenn in Seiten eingebettete scrollbare Seiten eingebettet sind und der Benutzer eine Bildlaufleiste verschiebt.

screenXund screenY: In
Bezug auf die obere linke Ecke des physischen Bildschirms / Monitors bewegt sich dieser Referenzpunkt nur, wenn Sie die Anzahl der Monitore oder die Monitorauflösung erhöhen oder verringern.

clientXund clientY:
Relativ zum oberen linken Rand des Inhaltsbereichs ( des Ansichtsfensters ) des Browserfensters. Dieser Punkt wird nicht verschoben, selbst wenn der Benutzer eine Bildlaufleiste aus dem Browser heraus bewegt.

Für eine visuelle Darstellung, welche Browser welche Eigenschaften unterstützen:

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

w3schools verfügt über einen Online-Javascript-Interpreter und -Editor, sodass Sie sehen können, was jeder tut

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>
Erweitern Sie das Snippet

Eric Leschinski
quelle
4
und in jquery sind offsetX und offsetY relativ zum übergeordneten Container
Muhammad Umer
2
Der Link zu w3schools scheint jetzt nur über den Referenzabschnitt verfügbar zu sein: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
gültig
1
Ich denke, es ist eine irreführende oder zumindest ineffektive Erklärung für pageX / pageY (und folglich für die Frage), da es auf die URL-Leiste und die Schaltfläche "Zurück" verweist, während es in Bezug auf den Seiteninhalt besser erklärt wird als z. B. in der visuellen Erklärung Antwort sagt. Das Beispiel w3schools ist auch nicht hilfreich, da es nur ein x / y-Paar ausgibt und kein Bildlauf darin vorhanden ist, der den Unterschied demonstrieren würde.
Robert Monfera
4
Die Erläuterungen zu PageX / PageY & ClientX / clientY werden ausgetauscht. du solltest es korrigieren. es ist irreführend
Navpreet Kaur
1
Ich denke @NavpreetKaur ist richtig. Diese Antwort ist in Bezug auf clientX vs pageX
zhouji
496

Hier ist ein Bild, das den Unterschied zwischen pageYund erklärt clientY.

pageY vs clientY

Das Gleiche gilt für pageXund clientXsind.

pageX/Y Die Koordinaten beziehen sich auf die obere linke Ecke der gesamten gerenderten Seite (einschließlich der durch Scrollen ausgeblendeten Teile).

während clientX/Y Koordinaten relativ zur oberen linken Ecke des sichtbaren Teils der Seite sind, werden sie über das Browserfenster "gesehen".

Siehe Demo

Du wirst es wahrscheinlich nie brauchen screenX/Y

Dan
quelle
21
Super, danke für die Demo, erklärt besser als Text.
Rahul Prasad
Ich mag @ SimoEndres Erklärung am besten
Pierre
9
Möchtest screenX/Ydu dir vorstellen, was ist?
Ayjay
1
Ich möchte ein Klickereignis an einen bestimmten rechteckigen Bereich auf der Seite binden, pageX/pageYsollte also anstelle von clientX/clientY?
Techie_28
1
was ist mit dem einfachen x und y? Sie scheinen die gleichen zu sein wie clientX / Y, als ich es versuchte, aber ich fand keine endgültige Referenz darauf
zhouji
117
  1. pageX / Y gibt die Koordinaten relativ zum <html>Element in CSS-Pixeln an.
  2. clientX / Y gibt die Koordinaten relativ zu den viewportin CSS-Pixeln an.
  3. screenX / Y gibt die Koordinaten relativ zu den screenIn-Device-Pixeln an.

In Bezug auf Ihre letzte Frage, ob die Berechnungen in Desktop- und mobilen Browsern ähnlich sind ... Zum besseren Verständnis - in mobilen Browsern - müssen wir zwei neue Konzepte unterscheiden: das Layout-Ansichtsfenster und das visuelle Ansichtsfenster . Das visuelle Ansichtsfenster ist der Teil der Seite, der derzeit auf dem Bildschirm angezeigt wird. Das Layout-Ansichtsfenster ist ein Synonym für eine vollständige Seite, die in einem Desktop-Browser gerendert wird (mit allen Elementen, die im aktuellen Ansichtsfenster nicht sichtbar sind).

In mobilen Browsern sind die pageXund pageYimmer noch relativ zur Seite in CSS-Pixeln, sodass Sie die Mauskoordinaten relativ zur Dokumentseite erhalten können. Auf der anderen Seite clientXund clientYdefinieren Sie die Mauskoordinaten in Bezug auf das visuelle Ansichtsfenster .

Es gibt hier einen weiteren Stackoverflow-Thread zu den Unterschieden zwischen dem visuellen Ansichtsfenster und dem Layout-Ansichtsfenster: Unterschied zwischen dem visuellen Ansichtsfenster und dem Layout-Ansichtsfenster?

Eine weitere gute Ressource: http://www.quirksmode.org/mobile/viewports2.html

Endre Simo
quelle
27

Was mir geholfen hat, war, ein Ereignis direkt zu dieser Seite hinzuzufügen und für mich selbst zu klicken! Öffnen Sie Ihre Konsole in den Entwicklertools / Firebug usw. und fügen Sie Folgendes ein:

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
Erweitern Sie das Snippet

Mit diesem Snippet können Sie Ihre Klickposition verfolgen, während Sie scrollen, das Browserfenster verschieben usw.

Beachten Sie, dass pageX / Y und clientX / Y identisch sind, wenn Sie ganz nach oben gescrollt haben!

feuriger Sonnenuntergang
quelle
5

Der Unterschied zwischen diesen hängt weitgehend davon ab, auf welchen Browser Sie sich gerade beziehen. Jeder implementiert diese Eigenschaften anders oder gar nicht. Quirksmode bietet eine hervorragende Dokumentation zu Browserunterschieden in Bezug auf W3C-Standards wie DOM- und JavaScript-Ereignisse.

Dominic Barnes
quelle
4
Ihre Antwort ist gut, aber sie wird bald veraltet sein. Quirksmode.org/mobile/tableViewport_desktop.html
Dan