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:

Mozilla Firefox und Safari verwenden die obere linke Ecke der äußeren Rahmenwand des Elements als Referenzpunkt.
Andere Browser verwenden die obere linke Ecke der Innenwand des Elementrahmens als Koordinatenursprung.

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:

Beispiele für Variablen, Zeiger und Referenzfunktionen und -operationen in JavaScript
Eine kurze Diskussion über Zeiger und Adressen in JavaScript
Ein neues Verständnis des this-Zeigers in JavaScript vermitteln
Diskussion über den Gültigkeitsbereich von JS-Variablen und diesen Zeiger
Drei Möglichkeiten, den this-Zeiger innerhalb einer Javascript-Funktion zu ändern
Javascript dieser Zeiger

<<: W3C Tutorial (10): W3C XQuery Aktivitäten

>>: Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 18.04.5 LTS Server Edition

Detaillierte Erklärung von Group By und Having in MySQL

Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten

Detaillierte Erklärung von Group By und Having in MySQL

Erläuterung der Zusammenführung von TypeScript-Namespaces

Ausführliche Erklärung zur Docker-Maschine

So verwenden Sie die JSZip-Komprimierung in CocosCreator

JavaScript implementiert die Klick-Umschaltfunktion

MySQL-Datenbankoperationen (Erstellen, Auswählen, Löschen)

Markodwns ausführliche Erklärung der Idee des synchronen Scrollens mit Titelausrichtung

SpringBoot integriert Activiti7-Implementierungscode

Eine detaillierte Einführung in die Bereitstellung von Seata Docker mit hoher Verfügbarkeit

Detaillierte Erklärung der reinen SQL-Anweisungsmethode basierend auf JPQL

Artikel empfehlen

Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren

Erste Schritte mit dem Animieren von SVG-Pfadstrichen mit CSS3

jQuery-Plugin zum Erreichen eines Bildvergleichs

So optimieren Sie die MySQL-Leistung durch langsame MySQL-Abfragen

Detaillierte Erläuterung der Befehle zum Lesen und Schreiben von Remotedateien mit Vim im Linux-System

Verwendung von CSS-Animationseigenschaften und Beispielcode (Übergang/Transformation/Animation)

Verwendung des MySQL-Zeitstempels

So verwenden Sie den Linux-Befehl nl

JavaScript, um den Effekt des Klickens auf das selbst erstellte Menü zu erzielen

Lösen Sie das Problem des Zeilenumbruchs in der Scroll-Ansicht des WeChat-Applets

Analyse des rel-Attributs in HTML

Detaillierte Erklärung der MySQL-Partitionstabelle

So verwenden Sie das Name-Attribut und das ID-Attribut des A-Tags, um innerhalb der Seite zu springen

HTML+CSS zur Implementierung des Beispielcodes des Dropdown-Menüs der Navigationsleiste

Eine kurze Diskussion über JavaScript-Drosselung und Anti-Shake