元素获取：elementFromPoint和elementsFromPoint

document.elementFromPoint 获取指定坐标点最上面的元素，而 document.elementsFromPoint 获取指定坐标点下面的所有元素，包括 html 元素，body 元素取决于其是否在指定的坐标上。

方法参数和返回：

• elementFromPoint(x: number, y: number): Element

• elementsFromPoint(x: number, y: number): Array

注意：

• point-events 设置为 none 的元素将被忽略。

• 如果指定的坐标点在文档的可视范围外，或者坐标包含负数，那么结果返回 null 或 [] （与浏览器版本有关）。

• 如果指定的位置为匿名元素（如 ::before, ::after）或 滚动条，则返回其最近一个非匿名类型的祖先元素。

更多参看：https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint

应用场景

白屏检测：

通过查找指定位置的DOM元素，判断起是否存在来判断页面状态，通过通过document.elementsFromPoint 获取屏幕底部是否有元素，没有就是白屏。做的复杂点，就是采样对比，对于有骨架屏的项目，通过对比前后获取的 dom 元素是否一致，来判断页面是否变化。

具体参看：《前端白屏的检测方案，让你知道自己的页面白了》

DataV类似大屏画布获取元素

比如大屏画布，多层堆叠，如果是通过点去 计算元素坐标是否在点内，那么计算量很大。

而elementFromPoint与 elementsFromPoint 则非常方便地 在图层管理区域，高亮鼠标所在区域（可以给标志，在产品上做一些优化体验）

之前 张鑫旭 还有：小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现，也是一种应用，还有一个几个用法暂时没有好的归纳，暂时就放过了！

转载本站文章《元素获取：elementFromPoint和elementsFromPoint》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2024_0318_9084.html