JavaScriptでマウスの位置にある要素を取得する

面白そうな関数なので覚書
φ(..)メモメモ...

document.elementFromPoint()

var x = 100;
var y = 100;
var element = document.elementFromPoint(x, y);
document.addEventListener('click', function(event) {
  var x = event.clientX;
  var y = event.clientY;
  var element = document.elementFromPoint(x, y);
  console.log(element);
});

備考

  • 要素が重なっている場合、最前面の要素を取得します
  • pointer-events: none;の要素は無視されます
  • 指定要素の親要素が<iframe>の場合、<iframe>を取得します
  • 重なっている要素すべてを取得する関数もあります
    • document.elementsFromPoint()
  • キャレット位置（カーソル位置）を取得する関数もあります
    • document.caretPositionFromPoint()

思いつく使用用途

  • テスト作業
  • 要素の簡易な指定
    • 拡張機能/ユーザースクリプトで対象要素を指定する
  • :hoverのJavaScriptでの代用

参考