MENU


Getting Elements at a Point

document.elementFromPoint(x, y) returns the topmost element at viewport coordinates, the same hit test a click performs; elementsFromPoint() returns the whole stack. Elements with pointer-events: none are skipped, so a dragged ghost can reveal the drop target beneath it. document.caretPositionFromPoint(x, y) returns the text node and character offset, as a custom editor needs; it is Baseline since December 2025 and replaces Chrome 1 's non-standard caretRangeFromPoint().

Hit-testing one pointHTMLLive
<p id="text" style="display:inline-block;padding:8px;background:#bbdefb">Hello world</p>
<script>
  const r = document.querySelector('#text').getBoundingClientRect();
  const [x, y] = [r.left + 60, r.top + r.height / 2];      // in an event: clientX, clientY
  console.log('top:', document.elementFromPoint(x, y).id);
  const stack = document.elementsFromPoint(x, y).map((el) => el.id || el.localName);
  console.log('stack:', stack.join(' > '));
  const caret = document.caretPositionFromPoint(x, y);
  console.log('caret:', caret.offsetNode.data, caret.offset);
</script>