Mausposition verfolgen in JavaScript
- Verschiedene Möglichkeiten zum Verfolgen von Mausereignissen in JavaScript
-
Verfolgen der Mausposition mit
PageX,PageYundclientX,clientYin JavaScript
Um Mausbewegungen in JavaScript zu verfolgen, verwenden wir einen Ereignis-Listener. Ein Ereignis-Listener ist etwas, das ständig auf die stattfindenden Änderungen lauscht. Beispielsweise wird ein mousedown-Ereignis nur ausgelöst, wenn ein Benutzer auf die Maustaste klickt.
In JavaScript stehen verschiedene Mausereignisse zur Verfügung, von denen wir uns auf das Ereignis mousemove konzentrieren, da wir die Mausposition verfolgen möchten. Eine vollständige Liste der Mausereignisse finden Sie in den MDN-Dokumenten zu Mausereignissen.
Verschiedene Möglichkeiten zum Verfolgen von Mausereignissen in JavaScript
Um die Mausposition zu verfolgen, müssen wir ihre x-Achse (horizontale Position) und y-Achse (vertikale Position) innerhalb des Browser-Tabs finden. Sie wissen vielleicht, dass die obere linke Ecke des Browsers mit (0,0) dargestellt wird. Wenn Sie die Maus horizontal bewegen, ändert sich ihre x-Position, und wenn Sie die Maus vertikal bewegen, ändert sich ihre y-Position.
Es gibt zwei verschiedene Möglichkeiten, diese x- und y-Positionen der Maus innerhalb der Registerkarte des Browsers zu erhalten, und zwar wie folgt.
- Wenn Sie die Mauspositionen relativ zur Größe der Webseite verfolgen möchten, verwenden Sie
pageXundpageY. - Wenn Sie die Mausposition basierend auf dem sichtbaren Bereich des Bildschirms verfolgen möchten, verwenden Sie
clientXundclientY.
Verfolgen der Mausposition mit PageX, PageY und clientX, clientY in JavaScript
Lassen Sie uns beide Möglichkeiten anhand des folgenden Beispiels verstehen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 1000px;">Div with height 1000px...</div>
<script src="./script.js"></script>
</body>
</html>
Hier haben wir ein HTML-Dokument. Innerhalb des body-Tags haben wir ein div-Element mit etwas Text und einer height von 1000px. Es gibt einen Grund, warum wir diesem div-Element so viel Höhe gegeben haben. Indem wir dem div so viel Höhe zur Verfügung stellen, erhalten wir eine Bildlaufleiste innerhalb der Webseite, und dies ist notwendig, um die beiden oben genannten Möglichkeiten zum Verfolgen von Mausbewegungen zu veranschaulichen.
Dann haben wir ein script-Tag, das das folgende Skript mit dem HTML-Dokument verknüpft.
function mousemove(event) {
console.log(
'pageX: ', event.pageX, 'pageY: ', event.pageY,
'clientX: ', event.clientX, 'clientY:', event.clientY)
}
window.addEventListener('mousemove', mousemove);
Wir haben dem Fensterobjekt mit der Funktion addEventListener in der Skriptdatei ein Ereignis mousemove hinzugefügt. Diese Funktion benötigt zwei Parameter, der erste Parameter ist das Ereignis, das wir hinzufügen möchten. Der zweite Parameter ist eine Funktion, die ausgeführt wird, nachdem das Ereignis ausgelöst wurde.
In diesem Fall haben wir die Funktion mousemove() erstellt und als Callback an den Event-Listener übergeben. Diese Funktion nimmt event als Argument. Diese Variable event liefert die aktualisierten x- und y-Positionen der Maus. Sie können der Funktion mousemove() einen beliebigen Namen geben, müssen jedoch den genauen Ereignisnamen an den Ereignis-Listener übergeben; andernfalls wird es nicht funktionieren.
Innerhalb der Funktion mousemove() haben wir nur console.log() die Mauswerte mit event.pageX, event.pageY und event.clientX, event.clientY. Der folgende Screenshot zeigt die Ausgabe des obigen Codes.
Wenn Sie die Ausgabe in der Konsole sehen, werden Sie keinen Unterschied feststellen, da pageX, und clientX dieselben Werte anzeigen und pageY und clientY dieselben Werte anzeigen. Wir haben die Seite noch nicht gescrollt, daher erhalten wir die gleichen Werte.
Wenn Sie die Seite scrollen und dann die Werte überprüfen, gibt es einen Unterschied in den Werten. Der folgende Screenshot veranschaulicht dies.
Nach dem Scrollen der Seite sind die Werte der Events pageX und pageY grösser als die der Events clientX und clientY. Dies liegt daran, dass pageX und pageY die Werte x und y vom Anfang der Webseite berechnen, während clientX und clientY die Werte basierend auf dem sichtbaren Teil des Bildschirms berechnen.
Später können Sie diese Mauspositionen auch nehmen und auf das HTML-Element anwenden (indem Sie die linken und oberen Werte des Elements aktualisieren), sodass das Element auch dort folgt, wo sich der Mauszeiger bewegt. Um dies zu erreichen, müssen Sie auch andere Mausereignisse verwenden.
Nun stellen Sie sich möglicherweise die Frage, welches dieser Mausereignisse in der Praxis verwendet werden soll, und die Antwort darauf ist, dass dies vom Anwendungsfall abhängt. Wenn Sie die Mausposition nur im sichtbaren Bereich des Bildschirms verfolgen möchten, wählen Sie clientX und clientY. Andernfalls können Sie die Mausereignisse pageX und pageY verwenden, um die Mausposition ab dem Start der Webseite zu berechnen.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn