Wie erhalte ich die Mausposition relativ zu einem Element in JavaScript?

Ermitteln der Mausposition relativ zu einem Element

Das Ermitteln der Mausposition relativ zu einem bestimmten Element ist für interaktive Anwendungen wie das Malen auf Leinwand von entscheidender Bedeutung Apps. Um dies zu erreichen, können wir die Methode getBoundingClientRect() verwenden.

Betrachten Sie das folgende JavaScript-Code-Snippet:

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top;  //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
};</code>

In diesem Beispiel hängen wir ein Onclick-Ereignis an ein Element mit der ID an „Klick mich.“ Wenn darauf geklickt wird, ruft der Ereignishandler mit getBoundingClientRect() das umschließende Rechteck des angeklickten Elements ab. Dieses Rechteck stellt die Position und Abmessungen des Elements auf dem Bildschirm dar.

Um die Position der Maus relativ zum Element zu berechnen, subtrahieren wir die linken und oberen Koordinaten des umgebenden Rechtecks ​​von den Eigenschaften clientX und clientY des Klickereignisses. Dadurch erhalten wir x und y, die die Position der Maus innerhalb des angeklickten Elements darstellen.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Mausposition relativ zu einem Element in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!