JavaScriptでマウス直下の要素を取得｜clientX・clientY・elementFromPointの使い方

JavaScriptでマウス直下の要素を取得｜clientX・clientY・elementFromPointの使い方

JavaScriptでマウスカーソル直下の要素を取得したいけれど、どの関数を使えばいいか迷っていませんか？
この記事では、clientX・clientY・elementFromPointを使って、カーソル位置の要素を簡単に取得する方法を詳しく解説します。

event.pageX、event.pageYでページ全体（下にスクロールしていてもページ全体の左上が原点）を基準とした座標を取得できます。
event.clientX、event.clientYでマウスのビューポート座標（見えている領域の左上が原点とする相対座標）を取得できます。

elementFromPointを使うと指定したビューポート座標（event.clientX, event.clientY）の最上位の要素が返ってきます。
document.elementFromPoint(event.clientX, event.clientY)
但し「pointer-events="none"」の要素は無視され、その下の要素が返されます。
また座標が可視領域外の場合や x 又は y が負の値である場合、nullが返されます。

例

マウスを動かすとページ全体（下にスクロールしていてもページ全体の左上原点）基準の座標と、マウス直下の要素のタグ名が表示されます

ソースコード

<div id="mouse-point"></div>
<div id="under-mouse-element"></div>
<script>
window.addEventListener("mousemove",function(event){
  //マウスのページ全体基準の座標を取得
  document.querySelector("#mouse-point").innerHTML=
      "マウスのページ全体基準の座標：（" + event.pageX + "," + event.pageY + "）";
  //ビューポート座標から要素を取得
  let elm=document.elementFromPoint(event.clientX, event.clientY);
  if(elm!=null){
    //要素のタグ名を表示
    document.querySelector("#under-mouse-element").innerHTML=
        "マウスの下の要素：<"+elm.tagName+">";
  }
});
</script>