如何在 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中文网其他相关文章！