- 更新日: 2015年3月2日
- jQuery & JavaScript
JavaScriptでrangeオブジェクトから座標を取得するコード
スポンサーリンク
JavaScript で range オブジェクトから、座標を取得するコードの例です。Range.getClientRects() メソッドを使用しています。
Range.getClientRects() – Web API インターフェイス | MDN
— 動作確認 —
Firefox 35
Chrome 40
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
スポンサーリンク
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 使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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); |
range オブジェクトから座標が取得できるのは便利です。
スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
>> 次の記事 : JavaScriptでcapitalize、アルファベット一文字目を大文字にする
<< 前の記事 : CoffeeScript入門、クラス継承とメソッドのオーバーライド
- jQuery & JavaScript の関連記事
- React.js用にESLintをインストールして設定、JavaScriptコードを楽に検証しよう
- JavaScriptでHTMLコメント要素を取得する
- YahooのJavaScriptマップAPI(YOLP)で地図を描画
- HTML5のGeolocation APIで現在地の位置情報(緯度/経度)を取得するJavaScriptコード
- JavaScriptでキャメルケースを単語に分割
- Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire
- JavaScript/jQueryでDOM要素が存在するか確認する方法
- JavaScriptでスクロールを一時的に止める
- JavaScriptでcapitalize、アルファベット一文字目を大文字にする
- CoffeeScript入門、クラス継承とメソッドのオーバーライド
Leave Your Message!