Zusammenfassung des Erhaltens mauspositionsbezogener Attribute in JavaScript_Javascript-Kenntnissen

Javascript verfügt über kein Mausobjekt. Das Abrufen von Mauskoordinaten hängt vom leistungsstarken Ereignisobjekt ab.

Durch die Überwachung der Mausbewegung des Dokuments können wir die Mausposition in Echtzeit ermitteln.

Aber! ! Das Ereignis enthält zu viele mausbezogene Attribute, was sehr verwirrend ist! Wie folgt:

event.layerX	event.layerY
event.clientX	event.clientY
event.pageX	event.pageY
event.offsetX	event.offsetY
event.screenX	event.screenY
event.x	event.y

Insgesamt 6 Gruppen!

Und der Unterschied zwischen ihnen ist nicht offensichtlich und die Browser sind nicht kompatibel!

Der Zweck dieses Artikels besteht darin, die Unterschiede zu verdeutlichen und diejenigen auszuwählen, die nicht empfohlen werden.

Testcode

Führen Sie den folgenden Code direkt aus:

Code kopieren Der Code lautet wie folgt:

http://www.w3.org/1999/xhtml"> />

Körper {position:relative;}
div {min-height: 300px; Hintergrundfarbe: #eee;}
#jg {rechts: 0; oben: 10px; Position: fest; Hintergrundfarbe: #f00;}

Ergebnisse anzeigen

In-Screen div

Groß und breit. . .

off-screen DIV

<script><br> var jg = document.getElementById('jg');<br> document.onmousemove = Funktion (e) {<br> e = e ||. window.event;<br> jg.innerHTML = 'layerX:' e.layerX <br> ',layerY:' e.layerY <br> ', <br/>clientX:' e.clientX <br> ',clientY:' e.clientY <br> ', <br/>pageX:' e.pageX <br> ',pageY :' e.pageY <br> ',<br/>offsetX:' e.offsetX <br> ',offsetY:' e.offsetY <br> ',<br/>screenX:' e.screenX <br> ',screenY:' e.screenY <br> ',<br/>x:' e.x <br> ',y:' e.y;<br> }<br> </script>

Während des Testprozesses wurde ein Artefakt entdeckt: Chrome (Google-Browser) und IE9 sind mit allen oben genannten Attributen vollständig kompatibel! Es ist sehr praktisch, sie zu vergleichen.

Nach dem Vergleich sind die Ergebnisse wie folgt:

Erklärung jedes Attributs

clientX und Y sind die Koordinaten der Maus relativ zum Browser-Ansichtsfenster (d. h. der Teil außerhalb der Bildlaufleiste wird von allen Browsern unterstützt).

ScreenX und Y sind die Koordinaten der Maus relativ zur linken Seite (oberer Rand) des gesamten Bildschirms. Sie haben grundsätzlich keinen Kontakt zum Dokument und sind vollständig kompatibel.

OffsetX und Y sind die Koordinaten der Maus relativ zum aktuell gezeigten Objekt. Wenn die Maus auf die Schaltfläche zeigt, wird OffsetX relativ zur Schaltfläche nicht unterstützt

x und y sind dieselben wie LayerX und Y in Standardbrowsern. Es handelt sich um Attribute, die zum Ersetzen von LayerX im IE verwendet werden können

pageX und Y sind die Koordinaten der Maus relativ zur linken Seite (oberer Rand) der gesamten Seite, einschließlich derjenigen außerhalb des Ansichtsfensters. IE7 und 8 unterstützen sie nicht.

Wichtige Punkte: LayerX und LayerY

LayerX und Y sind neue Attribute, die von Standardbrowsern eingeführt werden und auch von IE9 unterstützt werden. Es kann verwendet werden, um OffsetX und Y zu ersetzen. Es ist jedoch definiert als: die Koordinaten des nächstgelegenen Elements mit Positionierungsinformationen relativ zum aktuell zeigenden Element. Dieses „mit Positionierung“ bedeutet, dass es CSS-Attribute gibt, die nicht standardmäßig positioniert sind (dh nicht statisch).

Wenn das aktuell angezeigte Element positioniert ist, geben LayerX und Y die Koordinaten relativ zu diesem Element zurück. Wenn es noch keine Positionierung gibt, fahren Sie fort —— HTML-Knoten.

Wenn Sie also in Firefox den OffsetX-Wert möchten, müssen Sie Positionsinformationen hinzufügen!

Kompatibilitätsübersicht:

1. Firefox unterstützt die Attribute offsetX, offsetY und x, y, sie können jedoch durch layerX ersetzt werden 2. x und y in dh entsprechen LayerX und LayerY in Firefox&chrome; 3. Zwischen der Dokumentgrenze von IE7 und 8 und der Browserfenstergrenze besteht ein Abstand von 2 Pixeln. Wenn das Fenster maximiert ist, beträgt der minimale Bildschirm X 2 Pixel 4. Obwohl die Werte „layerX“ und „Y“ in ie9 aus unerklärlichen Gründen falsch sind, scheinen sie mit dem HTML-Tag zusammenzuhängen. Ziehen Sie beispielsweise im Code meines Beispiels die Bildlaufleiste ganz nach rechts und bewegen Sie die Maus langsam davon der Leerraum zum großen DIV. Zu diesem Zeitpunkt wird auch die Differenz zwischen dem äußersten rechten Teil des großen DIV und dem äußersten rechten Teil des ersten DIV in LayerX berechnet. . . Da es am Ende immer mehr Elemente gibt, wird diese Berechnung komplizierter; Firefox und Chromes LayerX haben dieses Problem jedoch nicht. Verwenden Sie LayerX also nicht in IE9.

5. In Chrome haben x und y zwar Werte, sind aber genau die gleichen wie clientX und Y! Daher wird die Verwendung von XY-Attributen nicht empfohlen.


Kompatibilitätskorrektur

In Standardbrowsern können position und event.layerX verwendet werden, um das Attribut event.offsetX zu implementieren In IE7 und 8 gibt es kein pageX, pageY. Sie können es nur mit document.documentElement.scrollLeft event.clientX finden.

So kann entweder x, y oder offsetX, offsetY im IE entfernt werden.