jQueryやJavaScriptだと要素の取得にはIDとかセレクタを普通は使います。
でもセレクタを使わずに画面上の座標から要素を取得したいこともありますよね、
そんな時に便利なのが elementFromPoint というJavaScriptのメソッド
これを使えば指定座標の要素を簡単に取得できて便利なのでその使い方について紹介します。
またjQueryを使った実用的な例についてもコード例と一緒に紹介
document.elementFromPointメソッドの使い方
これはドキュメント左上を基点として指定された座標にある要素を返すメソッド
「ドキュメント左上が基点」とは具体的にどういうことかというと次のような意味
- 座標はブラウザ上の画面左上から始まる
- スクロールされても常に基点はブラウザの左上
スクロールされたとしてもスクロール分は座標には含まれず、常にドキュメントが表示されている画面左上が座標の基点になることに注意
それでこのメソッドは次のように座標 x 、 y を渡して使います。(単位はピクセル)
|
1 |
element = document.elementFromPoint(x, y); |
そして指定座標にある要素を element として返してきます。
ちなみに座標が負の値やドキュメント外など不正な場合は null が返されるようです。
例えば次は100x100の座標にある要素の幅・高さをコンソール表示しているコード例
|
1 2 3 4 5 |
var elem = document.elementFromPoint(100, 100); if(elem){ console.log('width: ' + elem.clientWidth); console.log('height: ' + elem.clientHeight); } |
このように指定座標の情報を取得するのに使えます。
またこれはクリックなどのイベントと組み合わせて実用的な使い方もできます。
例えば次はmouseoverイベントが起きた時に、その下にある要素を取得しているコード例
|
1 2 3 4 5 |
document.addEventListener('mouseover', function(e){ let x = e.clientX; let y = e.clientY; let belowElem = document.elementFromPoint(x, y); }); |
イベントが起きた座標を調べるにはイベントオブジェクト e に対して
- e.clientX でマウスのX座標
- e.clientY でマウスのY座標
を調べることが可能です。
もちろんこれはjQueryでも同じように書けますが、そのやり方は後で紹介します。
以上が elementFromPoint を使った要素の取得方法
マウスイベントなどと組み合わせると便利そうなメソッドです。
取得要素をjQueryオブジェクトに変換するには
elementFromPoint で厄介なのはElementオブジェクト（ DOM要素 ）が返されること
なのでjQueryで要素を扱おうとするとそれをjQueryオブジェクトに変換が必要なことに注意です。
ではどう変換するとかというと、やり方は簡単
次のように取得したElementオブジェクトをjQuery関数に渡すだけです。
|
1 2 3 |
/** ElementをjQueryオブジェクトに変換 */ let element = document.elementFromPoint(100, 100) let $element = jQuery(element); |
jQuery(element) のようにすればjQuery側で扱えるオブジェクトになります。
ちなみに次記事で書いたようにDOM要素とjQueryオブジェクトは互いに変換することも可能です。
普段両者を変換するような場面は少ないですが、こういう風にJavaScript側のメソッドを使わないといけないときに役に立ちます。
elementFromPointの実用的な例
最後にjQueryと elementFromPoint を使った実用的なコードを少しだけ紹介
ここで紹介するのはmousehoverイベントが起きた時にその要素のテキストを表示する例です。
そのコード例は次の通り
例えば次のようなテーブル要素を作ったとします。
|
1 2 3 4 5 6 |
<table cellspacing="6" id="hogehoge"> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> <div class="below_elem_text">tag text : </div> |
そしてマウスがtd要素に入ってmouseoverイベントが発生した時に below_elem_text に要素のテキストを表示するとしましょう。
そのような処理をさせるために必要なのが次のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
jQuery(function(){ jQuery(document).on('mouseover', function(e){ /** イベントが起きた座標 */ let x = e.clientX; let y = e.clientY; /** イベントが起きた座標の要素をjQueryオブジェクトとして取得 */ let belowElem = jQuery(document.elementFromPoint(x, y)); /** 要素がnullでなく、td要素ならそのテキストを表示 */ if(belowElem[0] && belowElem.prop('tagName') === 'TD'){ jQuery('.below_elem_text') .text('td text : ' + belowElem.text()); }else{ jQuery('.below_elem_text').text('td text : '); } }); }); |
先ほど書いたように elementFromPoint で取得した要素をjQueryで使う場合はjQueryオブジェクトに変換する必要があることに注意です。
あとの詳しい処理についてはコード内のコメントを参照
実際にこれがどのような動作をするかは次のCodePenで試せます。
See the Pen 【JavaScript】指定座標の要素を取得するサンプル by ぴー助 (@pisuke-code) on CodePen.
td要素にマウスが入った場合だけそのテキストがテーブルの上と下に表示されます。
ここまでのまとめ
elementFromPointメソッドについてまとめ
- ドキュメントの左上を基点とした座標の要素を取得する
常に現在表示されている画面の左上が(0, 0)の座標になる点に注意
- 取得される要素は Elementオブジェクト
なのでjQueryで取得要素を扱うにはjQueryオブジェクトへの変換が必要
左上が基点座標なこととjQueryでは変換が必要なことに注意ですね。
このメソッドは純粋にそのまま座標を渡して要素を取得することは少ないと思います。
ですがマウスやドラッグなどの座標が関わるイベントと組み合わせると便利です。
以上指定座標の要素を取得する方法についてでした。
ではでは･△･)ﾉ ﾊﾞｲﾊﾞｲ
