So erhalten Sie Mauskoordinaten in JavaScript
In diesem Artikel werden die Methoden erörtert, um Mauskoordinaten in JavaScript zu erhalten.
So erhalten Sie Mauskoordinaten in JavaScript?
Um Mauskoordinaten in JavaScript zu erhalten, die “Clientx" Und "ClientyEigenschaften können verwendet werden mit:
- “ONCLICK" Fall
- “Pagex" Und "Pagey”Eigenschaften mit“AddEventListener ()" Methode
- “OnmousemoveEreignis und “GetElementById ()" Methode
Wir werden jetzt jede der aufgelisteten Methoden einzeln durchlaufen!
Methode 1: Mauskoordinaten in JavaScript mit Onclick -Event abrufen
Der "Clientx" Und "ClientyEigenschaften werden verwendet, um die horizontalen und vertikalen Koordinaten des Mauszeigers zurückzugeben. Während eine "ONCLICKDas Ereignis wird ausgelöst, wenn der Benutzer auf ein Element klickt. Diese Methoden können implementiert werden, um auf die horizontalen und vertikalen Mauskoordinaten zuzugreifen.
Syntax
Objekt.onclick = mousecoordinates () myScript;In der obigen Syntax “,“Mousecoordinaten ()”Bezieht sich auf die Funktion, die beim Klicken einer Schaltfläche aufgerufen wird.
Beispiel
Erstellen Sie zunächst eine Taste mit einem Onclick -Ereignis, das in die Mousecoordinaten () -Funktion umleitet, wenn es ausgelöst wird:
Definieren Sie als nächstes eine Funktion namens “Mousecoordinaten ()Das nimmt das Ereignis als Argument an. Wenn die angegebenen Ereignisse ausgelöst werden, die “Clientx" Und "ClientyEigenschaften geben die aktualisierten X- und Y -Koordinatenwerte der Maus zurück:
Funktion mousecoordinaten (Ereignis)dokumentieren.Schreiben ("Koordinate (x) =" + Ereignis.clientx + "
Koordinate (y) = " + Ereignis.kunden);
Die obige Implementierung führt in der folgenden Ausgabe:
Verwenden Sie beim Scrollen die folgende Methode, wenn Sie die Mauskoordinaten des gesamten DOM erhalten.
Methode 2: Mauskoordinaten in JavaScript mithilfe von Pagex- und Seiteneigenschaften mit addEventListener () Methode abrufen
Der "Pagex" Und "PageyEigenschaften geben die horizontalen und vertikalen Koordinaten zurück, indem sie sich auf die “beziehen“Dokumentobjektmodell (DOM)”Auf die Maus schweben und die“AddEventListener ()Methode, die einen Ereignishandler an ein Dokument anschließt. Diese Methoden können angewendet werden, um die Koordinatenwerte des sichtbaren Bildschirms und das gesamte DOM beim Scrollen zu erhalten.
Syntax
dokumentieren.AddEventListener (Mousemove, Mousecoordinaten)In der obigen Syntax “,“klicken"Bezieht sich auf das angegebene Ereignis und"MousecoordinatenIst die Funktion, auf die das Ereignis angewendet werden muss.
Beispiel
Passen Sie zunächst die Höhe des Gesamt -DOM auf der Webseite an, um den Koordinatenwert zu erhalten. “Pagey”Beim Scrollen:
Definieren Sie als nächstes eine Funktion namens “Mousecoordinaten ()"Das akzeptiert die Variable"FallAls Argument, wie in der vorherigen Methode erläutert. Diese bestimmte Variable wird verwendet, um auf den Wert von Pagex-, Page-, Clientx- und Clienty -Eigenschaften zuzugreifen, um die Koordinatenwerte der vollständigen Webseite und den sichtbaren Bildschirm beim Scrollen zu erhalten:
Funktion mousecoordinaten (Ereignis)Konsole.Log ("Pagex:", Ereignis.Pagex,
"Pagey:", Ereignis.Pagey,
"Clientx:", Ereignis.Clientx,
"Clienty:", Ereignis.Clienty)
Zum Schluss eine Veranstaltung mit dem Namen “Mousemove" und das "Mousecoordinaten”Als die Funktion, die aufgerufen wird, um die Koordinaten zu erhalten, während sich der Zeiger bewegt:
Fenster.AddEventListener ('Mousemove', Mousecoordinaten);Ausgang
In der obigen Ausgabe kann beobachtet werden, dass beim Scrollen der Wert von “Pagey"Erhöht sich mit zunehmender" Anstieg der "y-Achse”Der Dom.
Methode 3: Mauskoordinaten in JavaScript mit OnmousEmove -Ereignis und GetElementBById () -Methode abrufen
Der "Onmousemove"Ereignis wird ausgelöst, wenn sich der Zeiger auf einem bestimmten Element bewegt, und das"GetElementById ()”Methode holt ein Element mit einer angegebenen ID ab. Diese Methoden können angewendet werden, um die schwankenden Koordinatenwerte auf dem Mausschwebede auf DOM anzuzeigen.
Syntax
dokumentieren.GetElementById (elementId)Hier, "elementid”Bezieht sich auf die angegebene ID des hinzugefügten Elements.
Beispiel
Zunächst zuweisen eine ID mit dem Namen “AusgangAbsatz. Dann wenden Sie die “an“OnmouseEreignis in das Gesamtdokument und weisen Sie ihm die Funktion mousecoordinaten () zu, die entsprechend aufgerufen wird:
dokumentieren.onmousemove = mousecoordinaten;
Führen Sie im nächsten Schritt das erstellte Absatzelement, indem Sie seine ID im Dokument angeben.GetElementById () Methode:
var output = dokument.GetElementById ('Output');Definieren Sie hier eine Funktion namens “Mousecoordinaten ()”Nehmen Sie das Ereignis als Argument, wie in den vorherigen Methoden erläutert. Verwenden Sie in seiner Funktionsdefinition das “Clientx" Und "ClientyImmobilien mit der Veranstaltung, um das zu bekommen "X" Und "YMauskoordinaten beim Verschieben des Cursors.
Zeigen Sie schließlich die entsprechenden Koordinaten auf der DOM in Bezug auf die Position des Cursors als Innerhtml des abgerufenen Absatzes als "als" als "als"Ausgang”:
Funktion mousecoordinaten (Ereignis)var xpos = Ereignis.clientx;
var ypos = Ereignis.Kunde;
Ausgang.Innerhtml = "Koordinate (x):" + xpos + "" + "Pixel
Koordinate (y): " + ypos +" " +" pixel ";
Ausgang
Diese Beschreibung hat die Methoden zusammengestellt, um Mauskoordinaten in JavaScript zu erhalten.
Abschluss
Um Mauskoordinaten in JavaScript zu erhalten, wenden Sie die “anClientx" Und "Clienty”Eigenschaften mit dem Onclick -Ereignis, um die neuesten Mauskoordinaten auf der Schaltfläche Klicken zu erhalten, die“Pagex" Und "Pagey”Eigenschaften und“AddEventListener ()"Methode, um die Koordinaten sowohl des Gesamtdom als auch des aktuellen Bildschirms oder mit einem zu erhaltenOnmousemoveEreignis und “GetElementById ()Methode zur Anzeige der sich ändernden Koordinaten beim Schwebe der Maus. Dieser Blog hat die Methoden gezeigt, um Mauskoordinaten in JavaScript zu erhalten.