event.offsetX,Yの罠...どこが原点の座標値なのかを理解する (currentTargetとtarget) - Qiita

はじめに 記事のタイトルからして今更感満載ですが，mouse eventのoffsetX,Yに関して長年勘違いをしていたので備忘録を残しておきます． offsetX,Y は要素内でのカーソル座標． javascriptで のようにしてマウスベントを登録した場合， event.offsetX,Yは下図のようにid=boxA要素の左上を原点とした座標値になります． 要素ってどれのこと？ では下図のようにboxAの中にboxBがある状態で，boxAに対してmouseEventを付与した場合はどうなるでしょうか． この場合，event.offsetX，Yで取得される座標値は，そのイベントハンドラが付与されている要素(boxA)の左上を原点としたものではなく，マウスが載っている要素(boxB)の左上を原点とした座標値になります． なぜでしょうか． event.curerntTargetとevent.

[efcl]

targetとcurrentTargetの違い、offsetX/Y、screenX/Y、getBoundingClientRect()などについて