JavaScriptで、文字をクリックしたときにその文字の座標を得る方法はないでしょうか？

div や span の中に設定された文字列の、任意の【文字】をクリックしたときに、その文字の座標を得る方法を調査しています。

例えば、以下のような HTML があったとして、この div 要素内の【さ】をクリックするなどして、
【さ】という文字の座業を取得したいのです。

lang
1<div>あいうえおかきくけこさしすせそたちつてとなにぬねの</div>

１文字１文字を div や span で囲めばできそうですが、それでは現実的ではないため、
特にそういった力任せなことはせずに取得できないものかなーと思っています。

論理的な手順としては、以下のように考えているのですが、
手順３と手順６を実現する方法が具体的に思いつきません。

1.画面のどこかをクリックする
↓
2.マウスでクリックした位置を保持しておく
↓
3.その位置にある要素Xを取得する()
↓
4.ある要素Xの位置を取得する
↓
5.クリックした位置が、ある要素X内だとどの位置になるかを計算する
↓
6.ある要素X内のクリックした位置に描画されている文字Yを取得する()
↓
7.文字Yの画面全体での位置を取得する
↓
8.目的達成

これに似た処理の実現を試みた方や、やり方そのものの方針のアイデアなどありましたら、
ご教示いただけると助かります。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

こちらの回答が参考になるかもしれません。

How to determine the position of a character in a div element?

5に関してはClickイベントでoffsetXやpageXやScreenXを使えば求められそうな気がします。

7に関してどの程度の精度が必要かわかりませんがそのままClickイベントでpageXなどではだめなんでしょうか？

もし文字の左上の座標を求める場合は折り返しもあるので大変じゃないかと思います。

投稿2014/08/24 08:20

flied_onion

総合スコア2604

odorry

2014/08/24 17:07

flied_onion さん、ご回答ありがとうございます。＞もし文字の左上の座標を求める場合は折り返しもあるので大変じゃないかと思います。はい、大変だと思っています。また、おそらく実現するのは難しいのでは？と現状では思っていることに挑戦しているという状況です。さて、ご回答いただきました参考ページですが、残念ながら、直接的には目的の達成までには至りませんでした。ただ、Selection を使うというところから、【矩形を取得する】というアプローチのアイデアが発生し、以下のページに辿り着きました。 JavaScriptで文字列の矩形領域を取得する http://mattatz.hatenablog.jp/entry/2013/07/21/155545 このページに書かれている方法で、【各文字の絶対位置】を取得し、画面をクリックした場所が【どの矩形に含まれるか】を判定し、結果的に、その矩形と同じ場所に同じ大きさの div 要素を絶対的に配置することで、【要素になっていない文字単体を選択したかのような効果】を表現することができました。質問の方で書かせていただいた、 <div>あいうえおかきくけこさしすせそたちつてとなにぬねの</div> の場合の【さ】の部分だけ、色を変更することができました、ということです。 ※色を変更と言っても、重ねて div 要素の四角形を配置しているだけです Selection → 矩形 → Range オブジェクトと辿ることができ、【文字の座標を得る】というところまで行けましたので、この質問に対しては十分解決できたと思っています。すこし長くなりますが・・・、実は、この質問は、もっと別の問題を解決するための第一段階なのです。真に実現したいことは、【任意の位置に吹き出し画像のような物を設置】し、その設置した要素が、折り返しなどが発生しても、きちんと追従する、ということが実現できるかどうか、ということです。ですので、まずは、設置場所を単なる絶対座標ではなく、【ある文字の上に置いた】というようなことができれば追従できるかもしれないと考え、このような質問をさせていただきました。具体的にどういうことかと言いますと、上記の div 要素の例で、【さ】の部分に吹き出し画像の吹き出し開始部分が設置されたとして、折り返しや文字サイズの変更が行われても、【さ】の部分から吹き出しの開始部分が設置されていることをキープする、ということを目指しています。単純に position: absolute で、x, y 座標を指定して設置してしまうのは当然 NG でして、 position: absolute で、x, y 座標を em で指定すると、かなり要件に近い状態で実現はできます。が、この場合、【折り返し】で破綻してしまいます。 ※【折り返し】がなければ、この em 指定が落とし所かな、と思っています。【折り返し】をしても問題ない、ということを実現するのはかなり厳しいとは思いますが、簡単に「できない」と結論付けたくないと考えています。長くなりましたが、以上となります。

行動規範の内容に同意します

簡単に作った例ですのでブラウザごとの実装についてわかりかねますが以下のようなものはどうでしょうか？
またソースが汚いことをお許しください。

lang
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8" />
5        <title>Compliance</title>
6    </head>
7    <body>
8    <style>
9        #wrapper{
10            width : 100%;
11            height : auto;
12            margin : 0px;
13            padding : 10px;
14        }
15        #contents {
16            width : 100%;
17            height : auto;
18            margin : 0px auto;
19            padding : 0px;
20        }
21        #compliance_wrapper {/*--追従させるマーカーの役割--*/
22            width : 0px;
23            height : 0px;
24            margin : 0px;
25            padding : 0px;
26        }
27        #compliance {/*--追従させる要素--*/
28            width : 1em;
29            height : 1em;
30            margin : 0px;
31            padding : 0px;
32            position : absolute;
33            background : #CCCCCC;
34            display : inline-block;
35            z-index : 9999;
36        }
37    </style>
38    <div id="wrapper">
39        <div id="contents">
40            あいうえおかきくけこさしすせそなにぬねの<span id="compliance_wrapper">は</span>ひふへほまみむめもやゆよらりるれろわをん
41        </div>
42    </div>
43    <span id="compliance">○</span><!--追従させる要素-->
44    
45    <script>
46        /*--ここではとりあえず座標が変わっても追従させるためsetIntervalを使用していますが目的に合わせ変更してください--*/
47        (function (){
48            var ComplianceElement=document.getElementById("compliance");
49            function Compliance(){
50                var _Bounds=document.getElementById("compliance_wrapper").getBoundingClientRect();
51                ComplianceElement.style.top=_Bounds.y-15+"px";
52                ComplianceElement.style.left=_Bounds.x+"px";
53            };
54            setInterval(Compliance,1000/60);
55        }());
56    </script>
57    </body>
58</html>

質問者の方が作成しようとしているのはこのような動作の物ですかね？

投稿2015/01/22 12:19

Cf_cwd

総合スコア730

odorry

2015/01/24 11:21

コードありがとうございます。コードを見てなるほどなるほど、と思いました。そうです。こういう動作のものです。ただ、Mac の Chrome or Safari でそのままでは動かなかったので、少し修正して狙っているものができました。最終的な目標を具体に言うと、HTML で作られた画面上に、吹き出しを任意の位置に設置し、画面のウィンドウサイズを変更させて折り返しが発生しても、吹き出しの位置が変わらないようにしたかったのです。そのために、１．クリックした任意の文字の位置を取得する２．折り返しが発生しても位置追跡するという２点をクリアしたかったのです。コードでいただいた【<span id="compliance_wrapper">は</span>】この部分が、任意の文字をクリックしたときに挿入できれば実現ができそうです。かなり良いヒントになりました。ありがとうございました！