JavaScript クリックした場所の座標を求める
イベントが発生すると、イベントオブジェクトの各プロパティに座標値が格納されます。求める座標の種類に応じてプロパティが用意されています。座標値はすべてピクセル値で返されます。
| プロパティ | 説明 |
|---|---|
| clientX | 要素のX座標 |
| clientY | 要素のY座標 |
| pageX | ページ上のX座標（スクロール量が加算される） |
| pageY | ページ上のY座標（スクロール量が加算される） |
| screenX | モニタ画面上でのX座標 |
| screenY | モニタ画面上でのY座標 |
| offsetX | 要素からのX座標オフセット |
| offsetY | 要素からのY座標オフセット |
<body>
<script>
window.addEventListener("load" , function(){
window.addEventListener("click",coords,false);
var h1 = document.getElementsByTagName("output")[0];
h1.addEventListener("click", coords,false);
}, false);
function coords(evt){
var ele = document.getElementsByTagName("output")[0];
//クライアント座標を求める
var cx = evt.clientX;
var cy = evt.clientY;
//ページ座標を求める
var px = evt.pageX;
var py = evt.pageY;
//モニタ画面上の座標を求める
var sx = evt.screenX;
var sy = evt.screenY;
//オフセット座標を求める
var ox = evt.offsetX;
var oy = evt.offsetY;
ele.innerHTML = "clientX : " +cx+"<br>";
ele.innerHTML += "clientY : " +cy+"<br>";
ele.innerHTML += "pageX : " +px+"<br>";
ele.innerHTML += "pageY : " +py+"<br>";
ele.innerHTML += "screenX : " +sx+"<br>";
ele.innerHTML += "screenY : " +sy+"<br>";
ele.innerHTML += "offsetX : " +ox+"<br>";
ele.innerHTML += "offsetX : " +oy+"<br>";
//イベントの伝達を禁止
evt.stopPropagation();
}
</script>
<h1>クリックした座標値を表示</h1>
<p>クリックしてください。</p>
<output></output>
</body>ブラウザのウィンドウ内をクリックすると、クリックした場所の座標値が表示されます。
