Javascriptでマウスカーソル直下の要素を取得(clientX,clientY,elementFromPoint)

clientX、clientYでマウスのビューポート座標（見えている領域の左上が0,0とする相対座標）を取得できます。
event.clientX, event.clientY

elementFromPointを使うと指定したビューポート座標（x, y）の最上位の要素が返ってきます。
document.elementFromPoint(x, y)
但し「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>