DOM

HTML：

<SPAN id=IdTest style="border:5px solid red; cursor:default">[SPAN要素。ここでクリック…]</SPAN><BR>
<TABLE id=IdTest2 style="border:10px solid #000; border-spacing:5px; cursor:default">
 <TR><TD style="border:3px solid #888; padding:10px">[TD要素
  <SPAN style="border:5px solid red">[SPAN要素]</SPAN>
 ]
</TABLE>
<SPAN id=IdLog></SPAN>

JavaScript：

function Job(eve){ //click イベントの処理。
  D=eve;
  let E=eve.target; //イベントが起きた要素の取得。
  IdLog.innerHTML="E.offsetParent："+ E.offsetParent.tagName +"<BR>" //表示：
	+"E："+ E.tagName +"<BR>"
	+"E.offsetLeft："+ E.offsetLeft +"<BR>"
	+"E.offsetTop："+ E.offsetTop +"<BR>"
	+"eve.offsetX："+ eve.offsetX +"<BR>"
	+"eve.offsetY："+ eve.offsetY +"<BR>";
}
IdTest.onclick=Job;
IdTest2.onclick=Job;

ボーダー上だとマイナス値になるようです。

→click。offsetParent、tagName、offsetLeft、offsetTop。