読者です 読者をやめる 読者になる 読者になる

Web・IT うんたらら

業務系とWeb系の狭間でIT業界を彷徨いながら備忘録と足跡を残していきます

【JavaScript】 要素内におけるマウス位置の座標を取得 (iOS等、モバイルデバイスにも対応)

※2015/10/14 新しめのIEに対応しました。


HTMLのページ全体での座標を取得するサンプルはゴロゴロ転がってるのですが
要素内の相対的なマウス位置を取得するコードはあまり公開されてないようなので載っけてみます。
iPhoneiPadiOS)や、Androidタブレットなどモバイルデバイスにも対応してます。

function getMouseXYInElement(event) {
  if (!event) { event = window.event; }
  var elmX, elmY;
  if (event.targetTouches) { // for tablet
    elmX = event.targetTouches[0].pageX - event.target.offsetLeft;
    elmY = event.targetTouches[0].pageY - event.target.offsetTop;
  } else if (document.all || 'all' in document) { // for IE.
    elmX = event.offsetX;
    elmY = event.offsetY;
  } else {
    elmX = event.layerX;
    elmY = event.layerY;
  }
  //console.log("x:" + elmX + ", y:" + elmY); // is debug. 
  return {x: elmX, y: elmY};
}


使い方は、座標を取得したい要素のclickなりmousemoveなりのイベントから呼び出してあげるだけです。
HTML5 Canvasでお絵かきツール作ったりするときなんかに使えますよー。