document.elementsFromPoint 返回从上到下（视觉层叠顺序）的元素数组，索引0为最顶层元素，末尾为底层元素；仅包含可交互的Element节点，排除display:none、opacity:0无交互、pointer-events:none的元素。
document.elementsFromPoint 返回的是什么顺序？
它返回从上到下（视觉层叠顺序）的元素数组，顶部最前的元素排在索引 0，底层元素排在末尾。这点和 document.elementFromPoint 只返回最上层一个元素完全不同——elementsFromPoint 是真正“穿透式”的。
注意：返回列表包含所有参与层叠上下文的元素，但不包括 display: none 或完全透明（opacity: 0 且无交互）的元素；如果某元素设置了 pointer-events: none，它会被跳过，但它的子元素仍可能被计入（取决于子元素自身的 pointer-events 设置）。
调用前必须确保坐标是视口坐标
elementsFromPoint 的参数是相对于当前 viewport 左上角的 CSS 像素坐标（即 clientX / clientY），不是页面滚动偏移后的 document 坐标。直接传 event.pageX 或 event.offsetX 会出错。
- 鼠标事件中应使用
event.clientX和event.clientY - 若需基于某个元素内坐标换算，先用
elem.getBoundingClientRect()获取其视口位置，再做加减 - 页面有缩放（zoom）或 CSS transform 时，浏览器通常已自动校正，但 Safari 对某些 transform 场景支持不稳定，建议避免在 scale/rotate 容器内依赖该 API
常见错误：空数组或漏掉预期元素
返回空数组通常不是 API 失效，而是坐标点落在空白区域、iframe 外部、或被 clip-path/mask 隐藏的区域。更隐蔽的问题包括：
立即学习“前端免费学习笔记（深入）”；
- 目标元素父级设置了
overflow: hidden且坐标点实际在裁剪区外 - 元素有
visibility: hidden—— 它自身不会出现在结果中，但不影响后代（不同于display: none） - 使用了
contain: layout paint的祖先元素可能截断层叠上下文传播，导致深层子元素未被识别 - Shadow DOM 内部调用只返回 shadow 内部元素；跨 shadow boundary 需手动组合，
elementsFromPoint不自动穿透
简单实操：点击时打印所有被击中的元素
下面这段代码可直接粘贴控制台验证行为：
document.addEventListener('click', (e) => {
const els = document.elementsFromPoint(e.clientX, e.clientY);
console.log('Top to bottom:', els.map(el => el.tagName + '#' + el.id || ''));
});
你会发现 <body> 总在最后（除非页面有 fixed 元素盖住），而按钮上的文字节点（Text）不会出现——因为 API 只返回 Element 节点，不包括 Text 或 Comment。
真正在意 DOM 结构层级时，别只看 tagName，记得检查 el.parentElement 和 el.contains() 关系，否则容易误判嵌套归属。
