JavaScript・jQueryで指定座標の要素を取得するには

jQueryやJavaScriptだと要素の取得にはIDとかセレクタを普通は使います。

でもセレクタを使わずに画面上の座標から要素を取得したいこともありますよね、

そんな時に便利なのが elementFromPoint というJavaScriptのメソッド

これを使えば指定座標の要素を簡単に取得できて便利なのでその使い方について紹介します。

またjQueryを使った実用的な例についてもコード例と一緒に紹介

document.elementFromPointメソッドの使い方

これはドキュメント左上を基点として指定された座標にある要素を返すメソッド

「ドキュメント左上が基点」とは具体的にどういうことかというと次のような意味

  • 座標はブラウザ上の画面左上から始まる
  • スクロールされても常に基点はブラウザの左上

スクロールされたとしてもスクロール分は座標には含まれず、常にドキュメントが表示されている画面左上が座標の基点になることに注意

 

それでこのメソッドは次のように座標 x  、 y  を渡して使います。(単位はピクセル)

そして指定座標にある要素を element  として返してきます。

ちなみに座標が負の値やドキュメント外など不正な場合は null  が返されるようです。

 

例えば次は100x100の座標にある要素の幅・高さをコンソール表示しているコード例

このように指定座標の情報を取得するのに使えます。

 

またこれはクリックなどのイベントと組み合わせて実用的な使い方もできます。

例えば次はmouseoverイベントが起きた時に、その下にある要素を取得しているコード例

イベントが起きた座標を調べるにはイベントオブジェクト e に対して

  • e.clientX  でマウスのX座標
  • e.clientY  でマウスのY座標

を調べることが可能です。

もちろんこれはjQueryでも同じように書けますが、そのやり方は後で紹介します。

 

以上が elementFromPoint  を使った要素の取得方法

マウスイベントなどと組み合わせると便利そうなメソッドです。

取得要素をjQueryオブジェクトに変換するには

elementFromPoint  で厄介なのはElementオブジェクト( DOM要素 )が返されること

なのでjQueryで要素を扱おうとするとそれをjQueryオブジェクトに変換が必要なことに注意です。

 

ではどう変換するとかというと、やり方は簡単

次のように取得したElementオブジェクトをjQuery関数に渡すだけです。

jQuery(element)  のようにすればjQuery側で扱えるオブジェクトになります。

 

ちなみに次記事で書いたようにDOM要素とjQueryオブジェクトは互いに変換することも可能です。

普段両者を変換するような場面は少ないですが、こういう風にJavaScript側のメソッドを使わないといけないときに役に立ちます。

elementFromPointの実用的な例

最後にjQueryと elementFromPoint  を使った実用的なコードを少しだけ紹介

ここで紹介するのはmousehoverイベントが起きた時にその要素のテキストを表示する例です。

そのコード例は次の通り

 

例えば次のようなテーブル要素を作ったとします。

そしてマウスがtd要素に入ってmouseoverイベントが発生した時に below_elem_text  に要素のテキストを表示するとしましょう。

 

そのような処理をさせるために必要なのが次のコード

先ほど書いたように elementFromPoint  で取得した要素をjQueryで使う場合はjQueryオブジェクトに変換する必要があることに注意です。

あとの詳しい処理についてはコード内のコメントを参照

 

実際にこれがどのような動作をするかは次のCodePenで試せます。

See the Pen 【JavaScript】指定座標の要素を取得するサンプル by ぴー助 (@pisuke-code) on CodePen.

td要素にマウスが入った場合だけそのテキストがテーブルの上と下に表示されます。

ここまでのまとめ

elementFromPointメソッドについてまとめ

  • ドキュメントの左上を基点とした座標の要素を取得する
    常に現在表示されている画面の左上が(0, 0)の座標になる点に注意
  • 取得される要素は Elementオブジェクト
    なのでjQueryで取得要素を扱うにはjQueryオブジェクトへの変換が必要

左上が基点座標なこととjQueryでは変換が必要なことに注意ですね。

 

このメソッドは純粋にそのまま座標を渡して要素を取得することは少ないと思います。

ですがマウスやドラッグなどの座標が関わるイベントと組み合わせると便利です。

以上指定座標の要素を取得する方法についてでした。

ではでは・△・)ノ バイバイ

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください