JavaScriptでクリックされた場所の位置座標を取得してみよう

今回は、JavaScriptでクリックされた所の位置座標の取得方法を紹介します。

クリックされた場所の座標に要素を移動させたり、TOPまでスクロールさせたりなど、様々な場面で使われると思います。

まずはデモ

まずは以下のデモをご覧ください。

DEMO

位置座標には三つあって、クリックした要素左上を基準としたx・y座標、ウィンドウの左上を基準としたを基準としたx・y座標、ページ左上を基準としたx・y座標です。

位置座標の取得方法

クリックされた場所（イベントが発生した場所）は、addEventListenerを使って取得します。

例えば、以下のようなHTMLがあったとします。

<div id="js-target"></div>

この要素内で発生したクリックイベントから、クリックの位置座標をJavaScriptで取得します。

let target = document.getElementById('js-target');

target.addEventListener('click', function(e){
  let offsetX = e.offsetX; // =>要素左上からのx座標
  let offsetY = e.offsetY; // =>要素左上からのy座標
  let pageX = e.pageX; // =>ウィンドウ左上からのx座標
  let pageY = e.pageY; // =>ウィンドウ左上からのy座標
  let clientX = e.clientX; // =>ページ左上からのx座標
  let clientY = e.clientY; // =>ページ左上からのy座標
});

取得できるのは文字列ではなく、数値です。ですので、単位（px）は付いていません。

スタイルの書き換えなどする場合は、e.offsetX + ‘px’; という感じでpxを付けましょう。

関数を定義して使うのは、以下のようにします。

let target = document.getElementById('js-target');

target.addEventListener('click', getPosition);

function getPosition(e) {
  let offsetX = e.offsetX; // =>要素左上からのx座標
  let offsetY = e.offsetY; // =>要素左上からのy座標
  let pageX = e.pageX; // =>ウィンドウ左上からのx座標
  let pageY = e.pageY; // =>ウィンドウ左上からのy座標
  let clientX = e.clientX; // =>ページ左上からのx座標
  let clientY = e.clientY; // =>ページ左上からのy座標
}

addEventListenerの第二引数にある関数には、暗黙的に発生したイベントに関する情報が渡されます。

それを利用するために、ユーザー定義関数の引数を受け取る「e」を記述しています。

再度デモのリンクを貼っておきます。

DEMO

他にも色々取得できる

クリックなどのイベントに関する情報は、クリック以外にも色々取得できます。

試しに、以下のようなコードを実行してみて下さい。

target.addEventListener('click', function(e){
  console.log(e);
});

Developer ToolsのConsoleに、イベントに関する情報が格納されたオブジェクトが出力されます。

※ただし、ブラウザによって格納されるオブジェクトは異なるので、注意が必要です。

クリック以外にも利用可能

addEventListenerで利用できるイベントはクリックだけではなく、カーソルの移動やウィンドウのリサイズ、スクロールなどにも利用できます。

まとめ

使用頻度は高いので、必ず覚えておきましょう！