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

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

HTMLのページ全体での座標を取得するサンプルはゴロゴロ転がってるのですが
要素内の相対的なマウス位置を取得するコードはあまり公開されてないようなので載っけてみます。
iPhoneやiPad（iOS）や、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でお絵かきツール作ったりするときなんかに使えますよー。