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

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

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

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

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

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

このページの目次

document.elementFromPointメソッドの使い方
取得要素をjQueryオブジェクトに変換するには
elementFromPointの実用的な例
ここまでのまとめ

document.elementFromPointメソッドの使い方

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

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

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

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

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

element = document.elementFromPoint(x, y);

1	element = document.elementFromPoint(x, y);

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

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

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

var elem = document.elementFromPoint(100, 100);
if(elem){
  console.log('width: ' + elem.clientWidth);
  console.log('height: ' + elem.clientHeight);
}

var elem = document.elementFromPoint(100, 100);

if(elem){

console.log('width: ' + elem.clientWidth);

console.log('height: ' + elem.clientHeight);

}

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

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

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

document.addEventListener('mouseover', function(e){
  let x = e.clientX;
  let y = e.clientY;
  let belowElem = document.elementFromPoint(x, y);
});

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関数に渡すだけです。

/** ElementをjQueryオブジェクトに変換 */
let element = document.elementFromPoint(100, 100)
let $element = jQuery(element);

/** ElementをjQueryオブジェクトに変換 */

let element = document.elementFromPoint(100, 100)

let $element = jQuery(element);

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

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

PisukeCode - Web開発まとめ

jQueryオブジェクトとDOM要素を互いに変換する方法

https://pisuke-code.com/convert-jquery-and-dom-to-each

JavaScriptで要素をオブジェクトとして扱う方法は主に次の２つです。 jQueryオブジェクト DOM要素(DOM Element)ライブラリを入れてjQuer内で要素を扱うときはjQueryオブジェクトが、純粋なライブラリなしのJavaScript内で要素を扱うときはDOM要素が使われます。そしてこの２つはある方法を使えば互いに変換することも可能です。ということでjQueryオブジェクトとDOM要素の変換方法について解説互いに変換する方法ここでは jQueryオブジェクト　⇒　DOM要素 DOM要素　⇒　jQueryオブジェクトに変換する方法についてコード例と一緒に紹...

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

elementFromPointの実用的な例

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

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

そのコード例は次の通り

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

<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>

</table>

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

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

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 : ');
    }
  });
});

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では変換が必要なことに注意ですね。

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

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

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

ではでは･△･)ﾉﾊﾞｲﾊﾞｲ

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

document.elementFromPointメソッドの使い方

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

elementFromPointの実用的な例

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる