Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten
|
Die Methode zum Abrufen der Zeigerposition in JavaScript besteht darin, die Eigenschaften pageX und pageY oder clientX und clientY des Ereignisobjekts zu verwenden und mit den Eigenschaften scrollLeft und scrollTop zusammenzuarbeiten, sodass die Position des Zeigers berechnet werden kann.
Die Betriebsumgebung dieses Artikels: Windows 10-System, JavaScript 1.8.5, ThinkPad T480-Computer. Um die Position des Zeigers auf der Seite zu ermitteln, können Sie die Eigenschaften pageX und pageY oder clientX und clientY (IE-kompatibel) des Ereignisobjekts verwenden. Außerdem müssen Sie mit den Eigenschaften scrollLeft und scrollTop zusammenarbeiten, damit Sie die Position des Mauszeigers auf der Seite berechnen können.
//Position des Mauszeigers auf der Seite abrufen //Parameter: e stellt das aktuelle Ereignisobjekt dar //Rückgabewert: Gibt die Koordinaten der Maus relativ zur Seite zurück, Objektformat (x, y)
Funktion getMP(e) {
var e = e || Fenster.Ereignis;
zurückkehren {
x: e.SeiteX || e.ClientX + (Dokument.Dokumentelement.ScrollLeft || Dokument.Body.ScrollLeft),
y: e.SeiteY || e.ClientY + (Dokument.Dokumentelement.ScrollTop || Dokument.Body.ScrollTop)
}
}Die Ereignisattribute pageX und pageY werden von Internet Explorer-Browsern nicht unterstützt und die Ereignisattribute clientX und clientY werden von Safari-Browsern nicht unterstützt. Sie können sie daher mischen, um die Kompatibilität mit verschiedenen Browsern zu gewährleisten. Im Quirks-Modus stellt das Body-Element den Seitenbereich dar und das HTML-Element ist ausgeblendet. Im Standardmodus stellt das HTML-Element jedoch den Seitenbereich dar und das Body-Element ist nur ein unabhängiges Seitenelement. Daher müssen diese beiden Analysemethoden kompatibel sein. Das folgende Beispiel zeigt, wie die oben genannte erweiterte Funktion getMP() aufgerufen wird, um die aktuelle Position des Mauszeigers im Dokument zu erfassen.
<body style="Breite:2000px;Höhe:2000px;">
<textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea>
</body>
<Skript>
var t = document.getElementById("t");
Dokument.onmousemove = Funktion(e){
var m = getMP(e);
t.Wert = "MausX = " + mx + "\n" + "MausY = " + my
}
</Skript>Der Demonstrationseffekt ist wie folgt:
Holen Sie sich die relative Position des Zeigers Verwenden Sie offsetX und offsetY oder layerX und layerY, um die Offsetposition des Mauszeigers relativ zum enthaltenden Feld zu erhalten. Wenn Sie die Eigenschaften „offsetLeft“ und „offsetTop“ verwenden, um die Versatzkoordinaten des Elements in der Positionierungsbox abzurufen, und anschließend den Eigenschaftswert „layerx“ verwenden, um den Eigenschaftswert „offsetLeft“ abzuziehen, und den Eigenschaftswert „layery“ verwenden, um den Eigenschaftswert „offsetTop“ abzuziehen, können Sie die Position des Mauszeigers innerhalb des Elements abrufen.
//Position des Mauszeigers innerhalb des Elements abrufen //Parameter: e repräsentiert das aktuelle Ereignisobjekt, o repräsentiert das aktuelle Element //Rückgabewert: Gibt die relativen Koordinaten des Objekts zurück Funktion getME (e, o) {
var e = e || Fenster.Ereignis;
zurückkehren {
x: e.OffsetX || (e.LayerX – o.OffsetLinks),
y: e.OffsetY || (e.EbeneY – o.OffsetOben)
}
}In der Praxis weist die obige Funktion die folgenden zwei Probleme auf:
Wenn wir den Einfluss des Rahmens auf die Mausposition berücksichtigen, müssen wir, wenn der Rahmen eines Elements sehr breit ist, überlegen, wie wir den Einfluss des Rahmens auf die Mausposition eliminieren können. Aufgrund unterschiedlicher Rahmenstile beträgt die Standardbreite jedoch 3 Pixel, was es schwierig macht, die tatsächliche Breite des Elementrahmens zu ermitteln. Um die Rahmenbreite des aktuellen Elements zu bestimmen, müssen weitere Bedingungen festgelegt werden. Beispiel Die verbesserte erweiterte Funktion zum Abrufen der Position des Mauszeigers innerhalb eines Elements lautet wie folgt:
//Position des Mauszeigers innerhalb des Elements genau ermitteln //Parameter: e repräsentiert das aktuelle Ereignisobjekt, o repräsentiert das aktuelle Element //Rückgabewert: Gibt die Koordinatenposition der Maus relativ zum Element zurück, wobei x den Versatzabstand auf der x-Achse und y den Versatzabstand auf der y-Achse darstellt Funktion getME(e, o){
var e = e || Fenster.Ereignis;
//Breite des linken Rahmens des Elements abrufen //Rufen Sie die Erweiterungsfunktion getStyle() auf, um den Rahmenstilwert abzurufen und versuchen Sie, ihn in einen numerischen Wert umzuwandeln. Wenn die Konvertierung erfolgreich ist, weisen Sie den Wert zu.
//Andernfalls bestimmen, ob der Rahmenstil definiert ist. Wenn der Rahmenstil definiert ist und der Wert nicht „none“ ist, bedeutet dies, dass die Rahmenbreite dem Standardwert von 3 Pixeln entspricht.
//Wenn kein Rahmenstil definiert ist und der Breitenwert automatisch ist, beträgt die Rahmenbreite 0
var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none" )? 3 : 0);
//Breite des oberen Rahmens des Elements abrufen. Die Designidee ist die gleiche wie beim Abrufen des linken Rahmens. var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle !="none" ) ? 3 : 0);
var x = e.offsetX || (e.layerX - o.offsetLeft - bl); // Maus-Offset-Wert für allgemeine Browser // Kompatibel mit Mozilla-Browsern, abzüglich Rahmenbreite var y = e.offsetY || (e.layerY - o.offsetTop - bt); // Maus-Offset-Wert für allgemeine Browser // Kompatibel mit Mozilla-Browsern, abzüglich Rahmenbreite var u = navigator.userAgent; // Browser-Benutzerdaten abrufen if( (u.indexOf("KHTML") > - 1) ||(u.indexOf("Konqueror") > - 1) || (u.indexOf("AppleWebKit") > - 1)
){ // Wenn es sich um einen Safari-Browser handelt, subtrahieren Sie den Randeffekt x -= bl; y -= bt;
} return { // Gibt ein mit verschiedenen Browsern kompatibles Mauspositionsobjekt zurück, wobei die obere linke Ecke der Innenwand des Elementrahmens als Positionierungsursprung dient x: x, y: y
}
}Der Demonstrationseffekt ist wie folgt:
Lernempfehlung: JavaScript-Video-Tutorial Dies ist das Ende dieses Artikels zum Abrufen der Zeigerposition in JavaScript. Weitere Informationen zum Standort des JS-Zeigers finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: W3C Tutorial (10): W3C XQuery Aktivitäten
Artikel empfehlen
Detaillierte Erklärung des VUE-Reaktionsprinzips
Inhaltsverzeichnis 1. Grundlage des Responsive-Pr...
Grafisches Tutorial zur MySQL 5.7-Konfiguration ohne Installation
Mysql ist eine beliebte und einfach zu bedienende...
HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts
Inhaltsverzeichnis erreichen: Zusammenfassen: Daz...
Detaillierte Erklärung des Nginx-Prozessplanungsproblems
Nginx verwendet eine feste Anzahl von Multiprozes...
Lösung für das HTML-Kodierungsproblem in IE6, das zu JS-Fehlern und nicht angewendetem CSS führt
Im Test wurde festgestellt, dass wenn die Seitende...
HTML-Auszeichnungssprache - Tabellen-Tag
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Analyse der praktischen Erfahrung bei der Verwendung von Docker zum Erstellen von Microservices mit SpringBoot
Was ist das? Spring Boot ist ein Unterprojekt der...
Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)
Dieser Artikel enthält hauptsächlich Lösungen für...
Der IE8-Browser wird vollständig mit Webseitenstandards kompatibel sein
<br />Um zu beweisen, dass sein Engagement f...
So implementieren Sie einen reibungslosen Neustart von Nginx
1. Hintergrund Während des Serverentwicklungsproz...
Eine vorläufige Studie zu JSBridge in Javascript
Inhaltsverzeichnis Der Ursprung von JSBridge Das ...
MySQL Workbench herunterladen und verwenden Tutorial detaillierte Erklärung
1. MySQL Workbench herunterladen Workbench ist ei...
So beenden Sie den MySQL-Prozess ordnungsgemäß und sicher
Vorwort In diesem Artikel wird der Vorgang zum He...
Detaillierte Erläuterung der Konvertierung von JavaScript-Objekten in primitive Werte
Inhaltsverzeichnis Objekt.prototype.valueOf() Obj...
web.config (IIS) und .htaccess (Apache) Konfiguration
xml <?xml version="1.0" encoding=&qu...