今回は、JavaScriptでクリックされた所の位置座標の取得方法を紹介します。
クリックされた場所の座標に要素を移動させたり、TOPまでスクロールさせたりなど、様々な場面で使われると思います。
まずはデモ
まずは以下のデモをご覧ください。
位置座標には三つあって、クリックした要素左上を基準とした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」を記述しています。
再度デモのリンクを貼っておきます。
他にも色々取得できる
クリックなどのイベントに関する情報は、クリック以外にも色々取得できます。
試しに、以下のようなコードを実行してみて下さい。
target.addEventListener('click', function(e){
console.log(e);
});Developer ToolsのConsoleに、イベントに関する情報が格納されたオブジェクトが出力されます。
※ただし、ブラウザによって格納されるオブジェクトは異なるので、注意が必要です。
クリック以外にも利用可能
addEventListenerで利用できるイベントはクリックだけではなく、カーソルの移動やウィンドウのリサイズ、スクロールなどにも利用できます。
まとめ
使用頻度は高いので、必ず覚えておきましょう！
