如何获取最底部的元素，或者光标下所有元素的列表？

Question

我正在创建一个包含可排序的拖放系统，而我正试图在将鼠标悬停在元素列表上时复制jQuery的insertBefore/insertAfter行为。因此，我的光标下有一个元素，我想把一个占位符放在列表中。

我试过了：

• document.elementFromPoint - 这只给了我最重要的元素
• document.querySelectorAll(':hover') - 这给了我包含列表和拖动的元素，但不是我在之前/之后插入占位符的中间元素
• 检查event.toElement, .srcElement等
拖动元素上的
• 设置pointer-events: none - 这似乎只是将其从document.querySelectorAll ":hover"列表中移除

我想避免搜索列表中的所有项目，看看我的鼠标光标是否在其边界内，如果可能的话，因为我怀疑它会受到巨大的性能影响。

Answer 1

使用document.elementFromPoint。

您需要显示列表和元素列表。

对于每个元素：（1）将显示字符串保存到列表中，（2）将显示设置为“无”，（3）将元素添加到列表中，以及（4）再次检查该点处的元素。

然后，按相反​​的顺序浏览元素列表，并将显示设置回原来的状态。