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

スポンサーリンク
スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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 使用。

range オブジェクトから座標が取得できるのは便利です。

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!