如何在 JavaScript 中取得滑鼠相對於元素的位置？

取得滑鼠相對於元素的位置

取得滑鼠相對於特定元素的位置對於基於畫布的繪畫等互動式應用程式至關重要應用程式。為此，我們可以利用 getBoundingClientRect() 方法。

考慮以下JavaScript 程式碼片段：

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

在此範例中，我們將onclick 事件附加到具有ID 的元素「點擊我。」點擊時，事件處理程序使用getBoundingClientRect () 擷取被點選元素的邊界矩形。此矩形表示元素在螢幕上的位置和尺寸。

為了計算滑鼠相對於元素的位置，我們從點擊事件的 clientX 和 clientY 屬性中減去邊界矩形的左座標和上座標。這給了我們 x 和 y，它們代表滑鼠在單擊的元素內的位置。

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