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>
