JavaScriptでrangeオブジェクトから座標を取得するコード

JavaScript で range オブジェクトから、座標を取得するコードの例です。Range.getClientRects() メソッドを使用しています。

Range.getClientRects() – Web API インターフェイス | MDN

— 動作確認 —
Firefox 35
Chrome 40

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

event で取得した座標と range オブジェクトから取得した座標のデモ

以下テーブルのどこかしらをクリックすると、event で取得した座標と range オブジェクトから取得した座標の情報を表示します。

cell 1	cell 2	cell 3
cell 4	cell 5	cell 6
cell 7	cell 8	cell 9

— 以下に情報を表示 —

テーブル内のセルのクリックであれば、event, range で取得した座標はだいたい近い値が取れているかと思います。range オブジェクトからの取得できる値はウィンドウ内の相対値なので、event.pageX, event.pageY に相当する値を計算する場合はスクロール分を足してやる必要がある。range からの座標取得の計算が適当なので、かなり適当な近似値となっています。

上記デモの実際のコード

以下の JavaScript コードで動作しています。jQuery 使用。

function drawPoints(evt) {
  var range;
  // WebKit
  if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(evt.clientX, evt.clientY);
  // Mozilla
  } else if (evt.rangeParent) {
    range = document.createRange();
    range.setStart(evt.rangeParent, evt.rangeOffset);
  }
  var rect = range.getClientRects()[0];
  if (rect) {
    showEventData(evt);
    showRectData(rect);
  }
}

function showEventData(evt) {
　var message = "*** event から取得した座標 ***<br />";
  var client_pos = "clientX: " + evt.clientX + " / " + "clientY: " + evt.clientY + "<br />";
  var page_pos = "pageX: " + evt.pageX + " / " + "pageY: " + evt.pageY + "<br />";
  var info = message + client_pos + page_pos;
  $("#event-data").html(info);
}

function showRectData(rect) {
  var rect_clientX = Math.round(rect.left + rect.width / 2);
  var rect_clientY = Math.round(rect.top + rect.height / 2)
  var rect_pageX = Math.round(rect_clientX + window.scrollX);
  var rect_pageY = Math.round(rect_clientY + window.scrollY);
  var message = "*** range から取得した座標 ***<br />";
  var rect_client_pos = "rect_clientX: " + rect_clientX + " / " + "rect_clientY: " + rect_clientY + "<br />";
  var rect_page_pos = "rect_pageX: " + rect_pageX + " / " + "rect_pageY: " + rect_pageY + "<br />";
  var info = message + rect_client_pos + rect_page_pos;
  $("#rect-data").html(info);
}
window.addEventListener("click", drawPoints, false);