elementFromPoint() 返回视口坐标(x,y)处最上层可见元素；需在DOM加载后调用，参数为视口坐标而非文档坐标，clientX/clientY可直接使用，支持pointer-events:none穿透，兼容IE9+但不跨iframe。
elementFromPoint() 是 DOM API 提供的一个方法，用于获取当前视口（viewport）中指定屏幕坐标（相对于视口左上角）下层叠最顶层的可见元素节点。
基本用法：传入 x、y 坐标
调用方式很简单：
- 必须在文档已加载完成（如
DOMContentLoaded或window.onload后）使用； - 参数是相对于**当前视口左上角**的像素坐标（不是页面滚动后的文档坐标）；
- 返回值是
Element对象，如果该位置无元素则返回null； - 它只检测**可视区域内的元素**，超出视口范围（比如滚动条外）会返回
null。
示例：
const el = document.elementFromPoint(100, 200); // 获取视口内 (100px, 200px) 处最上层元素
if (el) {
console.log(el.tagName); // 如 "DIV"
}注意滚动偏移：不能直接用 pageYOffset 替换
很多人误以为把鼠标事件的 pageX/pageY 直接传给 elementFromPoint 就行——但这是错的。因为 pageX/pageY 是相对于整个文档左上角，而 elementFromPoint 要的是相对于**当前视口左上角**的坐标。
立即学习“Java免费学习笔记（深入）”；
正确做法是减去滚动偏移：
x = event.pageX - window.pageXOffsety = event.pageY - window.pageYOffset
更稳妥的方式是直接用 clientX/clientY（它们本来就是视口坐标）：
document.addEventListener('click', (e) => {
const el = document.elementFromPoint(e.clientX, e.clientY);
console.log(el);
});穿透隐藏/不可见元素：用 pointer-events: none 或临时隐藏
elementFromPoint 默认只返回“可交互”的可见元素。如果某元素设置了 visibility: hidden、display: none 或 opacity: 0，它会被跳过（除非它是唯一覆盖该点的容器）。
若想穿透某个遮罩层查底下的元素，可以临时禁用其指针事件：
overlay.style.pointerEvents = 'none'; const target = document.elementFromPoint(x, y); overlay.style.pointerEvents = ''; // 恢复
兼容性与边界情况提醒
这个 API 兼容所有现代浏览器（包括 IE9+），但要注意几个实际细节：
- iframe 内的内容无法跨域查询，
elementFromPoint只作用于当前文档； - 如果坐标落在滚动条上（且滚动条可见），可能返回
html或body，也可能返回null，行为因浏览器略有差异； - 元素需有渲染尺寸（哪怕
height: 0但有border或padding也算），纯文本节点或空 inline 元素通常不参与命中测试。
不复杂但容易忽略。
