読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

JavaScriptでクリックした位置にあるDOM要素を取得する方法

f:id:tsubasa123:20170121182418j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

結構昔からできたらいいなと思っていたことが意外と簡単にできると知ってテンションが上がったので記事にしておきます。今日は短めに。

 

参考サイト

 

q-az.net

 

Twitterをぼけーっと眺めていたらどなかたのリツイートか何かで見つけました。WordPressで作られていますがめっちゃオシャレなサイトです。JavaScritpやCSS関連は色々と勉強になる記事がたくさんありました。しばらくはストーキングしようと思っています。

 

で、先の記事のタイトル通り、指定座標の要素を取得するメソッドがあるようでして。最近はDOM関連を扱うときはもっぱらjQueryに頼りっぱなしだったので、documentオブジェクトからメソッドが提供されているというのは盲点でした。

 

使いかた

 

Document.elementFromPoint() - Web APIs | MDN

 

詳細はリファレンスをどうぞ。英語ですが、まぁなんとなくニュアンスは伝わると思います。

 

メソッドに渡す引数は2つ、x座標とy座標の位置です。返り値はDOMオブジェクトになっています。DOMオブジェクトが取得できるというのはいいですね。ちなみに要素が入れ子になっている場合は一番深い要素が返されます。この辺の感覚はイベントのキャプチャリングに近いかな。

 

サンプル

 

$('#startBtn').on('click', function() {
    $('.entry-content').on('click', function(e) {
        var node = document.elementFromPoint(e.originalEvent.pageX, e.originalEvent.pageY);
        if (node.nodeName === 'P') {
            $(node).css({border: '1px solid #ff0000'});
        }
    });
});

 

 

元記事と若干ネタ被りしていますが、上のボタンをクリックした後にこの記事内のテキストをクリックすると、座標の位置からDOM要素を取得し、要素にボーダーが追加されその段落が赤い線で囲まれるようになります。

 

注意点としては、クリック座標を使うときはclientX, clientYを使うこと。つまり、ドキュメント全体の座標ではなく、ブラウザの表示領域における座標を指定する必要があります。私は結構はまりましたのでご利用の際はお気を付けください。

 

さいごに

 

Web ツールでクリックされた要素名やその要素の width や height 値を取得、なんかにも使えますし、開発者ツールのクリックした要素をチェックもこのメソッドを基本に出来ているのかもしれません。

 

おっしゃる通りで、ちょっと複雑なDOM操作を求められるブラウザアプリなんかを作るときに使えそうなメソッドでした。いや、勉強になりました、ありがとうございます。

 

ではでは、最後までお付き合いいただきありがとうございました。