在不设置样式表值的情况下查找 DIV 的顶部和左侧值

Question

我正在制作一个绘图应用程序，其中涉及单击 div 框并读取坐标值。到目前为止，它的问题是坐标值相对于框不正确。

这是我的设置.. 绘图应用程序首先加载简单的 HTML，然后加载一个专门用于绘图的 DIV。然后我使用点击处理程序来检测点击并返回坐标。

宽度和高度返回正常，因为我为 DIV 定义了它们，但顶部和左侧位置在 javascript 中返回 NaN。

我知道我可以通过对 DIV 使用 css 属性 position="absolute" 并以这种方式指定 left 和 top 来轻松做到这一点，但这会破坏 HTML 文档的其余部分，因为这样整个事情就会显得格格不入.

有没有一种方法可以在不明确指定 DIV 的两个值的情况下获得 DIV 的顶部和左侧值？

我想用简单的 javascript 来实现这一点。没有 jquery。

Answer 1

jsBin demo

function getXY( ev ){
  var gbc = this.getBoundingClientRect(),
      X = ev.clientX - gbc.left,
      Y = ev.clientY - gbc.top;
  alert( X +' '+ Y);
}

document.getElementById('board').onclick = getXY;

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/event.clientX
https://developer.mozilla.org/en-US/docs/Web/API/event.clientY