.elementFromPoint()

https://developer.mozilla.org/en-US/docs/Web/API/Document.elementFromPoint

elementFromPointが呼び出されたドキュメントから、その与えられたポイントでの最上部の要素を返します。 CSSのピクセルでポイント指定を調整することで、対象となるドキュメントを含むwindowまたはframe内の左上隅の場所から、要素を取得します。

文法

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

引数	説明
x	x座標判定のために使用する値を指定します。この座標は、windowまたはframeを含むドキュメントのCSSピクセル相対の左上隅になります。
y	y座標判定のために使用する値を指定します。この座標は、windowまたはframeを含むドキュメントのCSSピクセル相対の左上隅になります。
戻り値
element	elementオブジェクトが返されます。

例

<!DOCTYPE html>
<html lang="en">
<head>
<title>elementFromPoint example</title>

<script>
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>

注意事項

もし、別のドキュメント(例えば、iframeのサブドキュメント)での座標から特定した要素であれば、そのドキュメントDOM内のメソッド(iframeであれば、そのiframe自身の)で呼び出されたもの要素が返されます。テクストボックスのスクロールバーのような、指定された座標が匿名(?)またはコンテンツ生成されたXBLの場合、匿名ではない最初の祖先要素(例えば、テキストボックス)が返されます。

指定された座標がドキュメントの可視範囲外、または調整するための指定が負の値の場合、結果はnullになります。

注意: XULドキュメントからの呼び出しでは、onloadイベントがこのメソッドが呼び出される前に発火されるまで待つ必要があります。

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	4	3	5.5	10.53	◯

モバイル
機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	?	?	?	?	?

仕様

Preliminary specification: elementFromPoint

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。