让所有元素触摸矩形

Question

我需要获取其边界矩形与我选择的任意矩形相交的所有元素。我不知道如何以原生方式执行此操作，到目前为止，我最好的解决方案是在矩形内部的一个有代表性的点样本上调用document.elementFromPoint，因为它可能会错过元素

在矩形中的每个点上运行它将是一场性能噩梦，因此不是一个选项。即使这是可行的，我也不认为它会抓住width: 0; height: 0的元素，尽管这对我来说不是巨大的关注。

我有关于如何使用多点方法最小化误报的想法，但是有真正的解决方案吗？

Answer 1

1. 获取可能触及矩形的每个元素的bounding rectangle。
2. 对于每个元素，检查边界矩形和矩形是否相交。

如果你有大量的元素，你可以做出假设，比如'元素的子元素的边界部分总是包含在元素的边界矩形中'，那么可以进行一些优化。或者当元素以某种方式排序时。但是，如果任何HTML元素的任何位置都可以，如CSS所允许的那样，你需要检查它们。

Answer 2

如果它们是平行的，那么只要为每个矩形定义四个参数，你就会很好：x，y，宽度和高度。比较它们现在每个更多，更多比使用单点消耗更少的性能，并且您将始终获得准确的结果。