クジラ机ブログ

HTML5でJavaScriptでマウス座標を得る方法

既に何度も書いているのに、毎回忘れて検索することになる、このトピックですが、意外と、「JavaScript マウス座標」で調べても、古い情報ばっかりで、正解がなかなか密からないんです。自分のブログに書いておけば、何ページもググらなくて済むので、ここに改めてメモ。

<canvas id="a_c" width="400" height="300"></canvas>
<script>
// マウスイベントを設定
var el = document.getElementById("a_c");
el.onmousedown = function (e) {
  var pos = getClientPos(e);
  console.log(pos);
};
// 座標を求める
function getClientPos(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  return {"x":x, "y":y};
}
</script>