JavaScript hat kein Mausobjekt und hängt von einem leistungsstarken Ereignisobjekt ab, um Mauskoordinaten zu erhalten.
Wenn wir uns die Mousemove des Dokuments anhören, können wir die Mausposition in Echtzeit erhalten.
Aber! ! Es gibt zu viele Attribute im Zusammenhang mit der Maus für die Veranstaltung, was sehr aufregend 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!
Darüber hinaus sind ihre Unterschiede nicht offensichtlich und die Browser sind nicht kompatibel!
Der Zweck dieses Artikels ist es, ihre Unterschiede zu klären und diejenigen auszuwählen, die nicht empfohlen werden.
Testcode
Führen Sie den folgenden Code direkt aus:
Die Codekopie lautet wie folgt:
<! DocType html> <br />
<html xmlns = "http://www.w3.org/1999/xhtml"> <br/>
<Head> <br />
<meta charset = "utf-8" /> < /p>
<Styles>
Körper {Position: relativ;}
Div {min-Höhe: 300px; Hintergrundfarbe: #eee;}
#jg {rechts: 0; Top: 10px; Position: fest; Hintergrundfarbe: #f00;}
</style>
<p> < /head> <br />
<body> <br />
<span id = "jg"> Ergebnisse zeigen < /span> <br />
<input type = "button" value = "a button" /> < /p>
<Div> div in Bildschirm </div>
<div style = "Höhe: 1000px; Breite: 2000px; Hintergrund: #ddd;"> Sehr hoch und breit. . . </div>
<Div> Off-Screen Div </div>
<p> < /body> <br />
<Script>
var jg = document.getElementById ('jg');
document.onmousemove = function (e) {
e = e || Fenster.Event;
Jg.innerhtml = 'Layerx:'+e.layerx+
', Schichten:'+E.Layery+
', <br/> clientx:'+e.clientx+
', clienty:'+e.clienty+
', <br/> pagex:'+e.Pagex+
', Pagey:'+E.Pagey+
', <br/> OffsetX:'+e.offsetx+
', Offsety:'+E.offsety+
', <br/> screenx:'+e.Screenx+
', Screeny:'+E.Screeny+
', <br/> x:'+e.x+
', y:'+ey;
}
< /script> <br />
</html>
Während des Tests fand ich ein magisches Tool: Chrome (Google Chrome) und IE9 sind mit allen oben genannten Attributen kompatibel! Es ist sehr bequem, sie zu vergleichen.
Nach dem Vergleich sind die Ergebnisse wie folgt:
Definition jedes Attributs
Clientx und y sind die Koordinaten der Maus relativ zum Browser -Ansichtsfenster (d. H. Der Teil außerhalb der Bildlaufleiste wird ignoriert); Alle Browser unterstützen es.
Screenx und y sind die Koordinaten der Maus relativ zur linken (Oberkante) des gesamten Bildschirms, der im Grunde genommen nicht mit dem Dokument berührt ist. Es ist vollständig kompatibel.
Offsetx und y sind die Koordinaten der Maus relativ zum derzeit vermerkten Objekt. Wenn die Maus zu diesem Zeitpunkt auf die Taste zeigt, ist OffsetX relativ zu dieser Taste. Firefox unterstützt nicht
x und y, Layerx und Y im selben Standardbrowser sind Attribute, mit denen Layerx in IE ersetzt werden kann.
Pagex und y sind die Koordinaten der Maus relativ zur linken (oberen Kante) der gesamten Seite, einschließlich außerhalb des Ansichtsfensters. IE7 und 8 unterstützen es nicht.
Schlüsselpunkte: Layerx und Schichten
Layerx und Y sind neue Attribute, die von Standardbrowsern veröffentlicht wurden, und IE9 unterstützt sie auch. Er kann anstelle von OffsetX und Y verwendet werden. Seine Definition ist jedoch: die Koordinaten des Elements mit Positionierungsinformationen im Vergleich zum aktuellen Zeigeelement. Diese "positionierte" bezieht sich auf ein CSS-Attribut (d. H. Nicht-statisches), das eine nicht defekten Positionierung aufweist.
Wenn das aktuell spitze Element positioniert ist, gibt Layerx und Y die Koordinaten relativ zu diesem Element zurück. Andernfalls überprüfen Sie das übergeordnete Tag dieses Elements. Wenn es noch keine Positionierung gibt, fahren Sie fort. bis zum Stammelement - HTML -Knoten.
Wenn Sie in Firefox den Wert von OffsetX -Wert aussetzen möchten, müssen Sie daher Positionsinformationen für Position hinzufügen!
Kompatibilitätszusammenfassung:
1. Firefox unterstützt OffsetX, Offsety und X, Y -Attribute nicht, aber sie können durch Layerx ersetzt werden.
2. x und y in IE entsprechen Layerx und Schichten in Firefox & Chrome;
3. Die Grenze des Dokuments von IE7 und 8 ist 2px von der Grenze des Browserfensters entfernt, sodass Screenx einen minimalen Abstand von 2px hat, wenn das Fenster maximiert wird.
4. Obwohl Layerx und Y in IE9 Werte haben, sind sie unerklärlicherweise falsch. Sie scheinen mit dem HTML -Tag verwandt zu sein. Ziehen Sie beispielsweise in meinem Beispielcode die Bildlaufleiste nach rechts, und die Maus bewegt sich langsam vom Leerlauf zum großen Div. Zu diesem Zeitpunkt wird auch der Unterschied zwischen dem bis rechtlichen und rechts bis rechtlichen der ersten DIV auch in Layerx einbezogen. . . Da es am Ende immer mehr Elemente gibt, desto komplizierter ist die Berechnung; Während der Layerx von Firefox und Chrom dieses Problem nicht hat. Verwenden Sie also nicht Layerx in IE9.
5. In Chrome sind sie, obwohl X und Y Werte haben, genau die gleichen wie clientx und y! Daher wird nicht empfohlen, die X, Y -Attribute zu verwenden.
Kompatibilitätsmittel
In Standard -Browsern kann Position und Ereignis.Layerx verwendet werden, um das Ereignis zu implementieren.OffsetX -Attribut;
In IE7 gibt es keine Seitex oder Seite. Sie können nur document.documentElement.scrollleft+event.clientX verwenden, um es zu finden.
Daher kann einer von X, Y oder OffsetX und Offsety in IE entfernt werden.