Was ist der Unterschied zwischen screenX / Y , clientX / Y y pageX / Y ?
Auch für iPad Safari, sind die Berechnungen ähnlich wie auf dem Desktop-oder gibt es einen Unterschied wegen der Ansichtsfenster?
Es wäre toll, wenn Sie mir ein Beispiel nennen könnten.
Hier ist ein Bild, das den Unterschied zwischen pageY y clientY .
Dasselbe gilt für pageX y clientX .
pageX/Y Die Koordinaten beziehen sich auf die linke obere Ecke der gesamten gerenderten Seite (einschließlich der durch Scrollen verdeckten Teile),
während clientX/Y Die Koordinaten beziehen sich auf die linke obere Ecke des sichtbaren Teils der Seite, "gesehen" durch das Browserfenster.
oder versuchen Sie diesen Ausschnitt:
document.addEventListener('DOMContentLoaded', _ => {
const info = document.getElementById('info');
const updateInfo = event => {
const { clientX, clientY, pageX, pageY } = event;
info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br /> pageX: ${pageX} pageY: ${pageY}`;
};
document.addEventListener('mouseover', updateInfo);
document.addEventListener('mousemove', updateInfo);
});
body {
border: 1px solid red;
min-height: 10000px;
margin: 10px;
}
#info {
border: 1px solid blue;
position: fixed;
top: 80px;
left: 40px;
}
<h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3>
<div id="info"></div>Hinweis : Das werden Sie wahrscheinlich nie brauchen screenX/Y
@EricLeschinski, IMHO ist es schwierig, Ihre Beschreibung von clientX/Y . Einige Leute könnten denken, dass die obere linke Ecke des Browserfensters der Ort ist, an dem sich auf dem Mac die Schaltfläche "Schließen" befindet. Ich würde eher empfehlen, die derzeitige Erklärung (mit einem imaginären, sich bewegenden Punkt) durch etwas wie "der Unterschied zwischen pageX- und clientX-Koordinaten des Punktes besteht darin, dass sich die erste auf die linke obere Ecke der gesamten Seite bezieht, während sich die zweite auf die linke obere Ecke des sichtbaren Teils bezieht" zu ersetzen. Jeder hat ein anderes Bild im Kopf, aber wahrscheinlich ist meine Version einfacher...
In JavaScript:
pageX , pageY , screenX , screenY , clientX und clientY gibt eine Zahl zurück, die die Anzahl der logischen "CSS-Pixel" angibt, die ein Ereignispunkt vom Referenzpunkt entfernt ist. Der Ereignispunkt ist der Punkt, auf den der Benutzer geklickt hat, und der Bezugspunkt ist ein Punkt oben links. Diese Eigenschaften geben den horizontalen und vertikalen Abstand des Ereignispunkts von diesem Referenzpunkt zurück.
pageX y pageY :
Relativ zum linken oberen Rand des vollständig gerenderten Inhaltsbereichs im Browser. Dieser Bezugspunkt befindet sich unterhalb der URL-Leiste und der Schaltfläche "Zurück" oben links. Dieser Punkt kann sich an einer beliebigen Stelle des Browserfensters befinden und kann seine Position tatsächlich ändern, wenn in den Seiten blätterbare Seiten eingebettet sind und der Benutzer eine Bildlaufleiste bewegt.
screenX y screenY :
Bezogen auf die linke obere Ecke des physischen Bildschirms/Monitors verschiebt sich dieser Bezugspunkt nur, wenn Sie die Anzahl der Monitore oder die Monitorauflösung erhöhen oder verringern.
clientX y clientY :
Bezogen auf den oberen linken Rand des Inhaltsbereichs ( das Ansichtsfenster ) des Browserfensters. Dieser Punkt verschiebt sich nicht, auch wenn der Benutzer eine Bildlaufleiste innerhalb des Browsers bewegt.
Hier finden Sie Informationen darüber, welche Browser welche Eigenschaften unterstützen:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
<script>
function showCoordinates(event){
var x = event.clientX;
var y = event.clientY;
alert(`X coordinates: ${x}, Y coordinates: ${y}`);
}
</script>
<p onmousedown="showCoordinates(event)">
Click this paragraph, and an alert box will show the x
and y coordinates of the mouse relative to the viewport
</p>
Der Link zu w3schools scheint nur noch über den Referenzbereich verfügbar zu sein: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
Ich denke, es ist eine irreführende oder zumindest ineffektive Erklärung für pageX / pageY (und damit auch für die Frage), da sie sich auf die URL-Leiste und die Zurück-Schaltfläche bezieht, während es besser in Bezug auf den Seiteninhalt erklärt wird, wie es z. B. in der Antwort zur visuellen Erklärung steht. Außerdem ist das w3schools-Beispiel nicht hilfreich, da es nur ein x/y-Paar ausgibt und kein Scrollen darin vorkommt, das den Unterschied verdeutlichen würde.
<html> Element in CSS-Pixeln.viewport in CSS-Pixel.screen in Gerätepixeln.Bezüglich Ihrer letzten Frage, ob die Berechnungen auf Desktop- und mobilen Browsern ähnlich sind... Für ein besseres Verständnis - auf mobilen Browsern - müssen wir zwei neue Konzepte unterscheiden: das Layout-Ansichtsfenster y visuelles Ansichtsfenster . Der visuelle Ansichtsbereich ist der Teil der Seite, der gerade auf dem Bildschirm angezeigt wird. Der Layout-Viewport ist ein Synonym für eine vollständige Seite, die in einem Desktop-Browser gerendert wird (mit allen Elementen, die im aktuellen Viewport nicht sichtbar sind).
Auf mobilen Browsern wird die pageX y pageY sind immer noch relativ zur Seite in CSS-Pixeln, so dass Sie die Mauskoordinaten relativ zur Dokumentseite erhalten können. Auf der anderen Seite clientX y clientY definieren die Mauskoordinaten in Bezug auf die visuelles Ansichtsfenster .
Hier gibt es einen weiteren Stackoverflow-Thread zu den Unterschieden zwischen dem visuellen Ansichtsfenster und dem Layout-Ansichtsfenster: Unterschied zwischen visuellem Ansichtsfenster und Layout-Ansichtsfenster?
Eine weitere gute Quelle: http://www.quirksmode.org/mobile/viewports2.html
Was mir geholfen hat, war, ein Ereignis direkt zu dieser Seite hinzuzufügen und selbst herumzuklicken! Öffnen Sie Ihre Konsole in Entwicklertools/Firebug usw. und fügen Sie dies 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 anywhereMit diesem Snippet können Sie Ihre Klickposition verfolgen, wenn Sie scrollen, das Browserfenster verschieben usw.
Beachten Sie, dass pageX/Y und clientX/Y identisch sind, wenn Sie ganz nach oben gescrollt sind!
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
5 Stimmen
Eine weitere Demo die fünf verschiedene Eigenschaften (Bildschirm, Client, Seite, Ebene, Versatz) verwendet, um die Mauskoordinaten zu ermitteln.