[JavaScript] クリックした位置にある要素の座標を取得する

投稿日：2017年10月2日更新日：2018年4月28日

クリックした位置にある要素の座標を取得するサンプルです。

サンプルソース

例）クリックした位置の座標をコンソールに出力する

window.addEventListener("click", function(){
  let px = event.pageX;  //クリックX
  let py = event.pageY;  //クリックY

  let ox = window.pageXOffset;  //スクロールX
  let oy = window.pageYOffset;  //スクロールY

  let obj = document.elementFromPoint(px - ox, py - oy);  //object

  let objX = obj.getBoundingClientRect().left;  //objectのX
  let objY = obj.getBoundingClientRect().top;   //objectのY

  console.log("クリックした位置のX座標　x:" + (px-ox));
  console.log("クリックした位置のY座標　y:" + (py-oy));
  console.log("クリックした要素のX座標　x:" + objX);
  console.log("クリックした要素のY座標　y:" + objY);
});

window.addEventListener("click", function(){

let px = event.pageX; //クリックX

let py = event.pageY; //クリックY

let ox = window.pageXOffset; //スクロールX

let oy = window.pageYOffset; //スクロールY

let obj = document.elementFromPoint(px - ox, py - oy); //object

let objX = obj.getBoundingClientRect().left; //objectのX

let objY = obj.getBoundingClientRect().top; //objectのY

console.log("クリックした位置のX座標　x:" + (px-ox));

console.log("クリックした位置のY座標　y:" + (py-oy));

console.log("クリックした要素のX座標　x:" + objX);

console.log("クリックした要素のY座標　y:" + objY);

});

実行サンプル

画面内をクリックすると、クリックした位置の座標とクリックした要素の座標が表示されます。

クリックした位置のX座標：

クリックした位置のY座標：

クリックした要素のX座標：

クリックした要素のY座標：

解説

スクロールしている状態でも、ページ左上からの座標が取得できます。

執筆者：とら