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
Ausführliche Erläuterung der Stilfunktion in Vue3-Einzeldateikomponenten
Inhaltsverzeichnis Stil mit Gültigkeitsbereich St...
Detaillierte Erläuterung der Installation und Konfiguration des Redis- und phpredis-Erweiterungsvorgangs im Ubuntu 18.04-System
Dieser Artikel beschreibt, wie man Redis- und php...
WeChat-Applet + MQTT, ESP8266-Implementierungsmethode zum Ablesen von Temperatur und Luftfeuchtigkeit
Erstens das Prinzip der esp8266 veröffentlicht Na...
Das Submit-Ereignis des Formulars reagiert nicht
1. Problembeschreibung <br />Wenn JS verwen...
Implementierungsprozess des Lupeneffekts im Javascript-Beispielprojekt
Inhaltsverzeichnis Vorwort Fall: Nachahmung des L...
jQuery implementiert Akkordeoneffekte
Dieser Artikel gibt Ihnen den spezifischen Code v...
CentOS 6 verwendet Docker, um ein Beispiel für den Betrieb einer Redis-Master-Slave-Datenbank bereitzustellen
In diesem Artikel wird beschrieben, wie Sie mit D...
Docker fügt eine Brücke hinzu und legt den IP-Adressbereich fest
Ich weiß nicht, ob es daran liegt, dass die Binär...
Lösung für das Problem, dass auf der utf8-kodierten Seite unter IE eine Zeile ohne Grund leer bleibt und die utf8-Seite nicht angezeigt werden kann
Der Grund dafür ist, dass alle Dateien in UTF8 kod...
Zusammenfassung der drei Phasen der Entwicklung eines visuellen Designers
Viele Leute haben dieses Buch gelesen: „Entwickel...
Detaillierte Erläuterung der Verwendung des gcc-Befehls unter Linux
Inhaltsverzeichnis 1. Vorverarbeitung 2. Zusammen...
Aufnahmedateien des öffentlichen WeChat-Kontos abspielen und speichern (AMR-Dateien in MP3 konvertieren)
Inhaltsverzeichnis Tools zur Audiotranskodierung ...
So verwenden Sie vite zum Erstellen einer Vue3-Anwendung
1. Installation Tipp: Derzeit gibt es kein offizi...
HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots
Code kopieren Der Code lautet wie folgt: <!DOC...
Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL
Bei den tatsächlichen Projekten, an denen ich tei...