Wie erhalte ich die Mausposition relativ zu einem Element in einer JavaScript-Mal-App?

Ermitteln der Mausposition relativ zu einem Element in einer Mal-App

Das Bestimmen der Mausposition relativ zu einem Element ist entscheidend für die Erstellung interaktiver Anwendungen, z als Mal-App. Um dies auf einer Leinwand zu erreichen, müssen Sie den richtigen JavaScript-Code verwenden.

Lösung:

Da eine jQuery-freie Lösung nicht ohne weiteres verfügbar war, finden Sie hier eine Alternative Ansatz:

<code class="js">document.getElementById('clickme').onclick = function(e) {
  // e = Mouse click event
  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>

Verwendung:

Dieser Code verwendet die Methode getBoundingClientRect(), um die Grenzen des Elements relativ zum Dokument zu ermitteln. Die clientX- und clientY-Eigenschaften des Mausereignisses werden dann verwendet, um die Position der Maus innerhalb des Elements zu berechnen.

HTML und CSS:

Um den Code zu testen, erstellen Sie eine Element mit dem folgenden HTML und CSS:

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

<code class="css">#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}</code>

Wenn Sie auf das „Click Me“-Element klicken, zeigt die Konsole die Position der Maus relativ zur oberen linken Ecke des Elements an. Diese Informationen sind für die präzise Erfassung von Mausbewegungen und Interaktionen in Ihrer Malanwendung unerlässlich.

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