マウスイベント
この青の範囲でクリックしてください。マウスの座標が表示されます。
青の範囲でマウスをクリックすると座標が表示されます。マウスイベントリスナーがクリックした座標を<div id="info">にセットします。ソースです。
<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <script>
    function load() {
      var info = document.getElementById('info');
      var clk = document.getElementById('click');
      clk.addEventListener('mousedown', function(e){
        info.innerHTML = 'mousedown: ' + "x=" + 
       e.clientX + ",y=" + e.clientY;
      },false);
    }
    document.addEventListener("DOMContentLoaded", load, false);
  </script>
</head>
<body>
  <div id="click" style="height: 150px;  background-color: #aaf;">
    この青の範囲でクリックしてください。マウスの座標が表示されます。
  </div>
  <div id="info">
  </div>
</body>
</html>
マウスをクリックした座標は、
x座標=e.clientX
y座標=e.clientY
で与えられます。