如何在 JavaScript 繪畫應用程式中取得滑鼠相對於元素的位置？

在繪畫應用程式中尋找滑鼠相對於元素的位置

確定滑鼠相對於元素的位置對於建立互動式應用程式至關重要，例如作為一個繪畫應用程式。要在畫布上完成此操作，您需要使用正確的 JavaScript 程式碼。

解決方案：

由於沒有現成的無jQuery 解決方案，這裡有一個替代方案方法：

<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>

用法：

此程式碼使用getBoundingClientRect() 方法來取得元素相對於文件的邊界。然後，使用滑鼠事件的 clientX 和 clientY 屬性來計算滑鼠在元素內的位置。

HTML 和CSS：

要測試程式碼，請建立一個具有以下HTML 和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>

當當您按一下「Click Me」元素時，控制台將顯示滑鼠相對於該元素左上角的位置。此資訊對於在繪畫應用程式中精確捕獲滑鼠移動和互動至關重要。

以上是如何在 JavaScript 繪畫應用程式中取得滑鼠相對於元素的位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！