獲取所有元素觸摸一個矩形

我需要獲取其邊界矩形與我選擇的任意矩形相交的所有元素。我並不知道有一種方法可以在本地執行此操作，到目前爲止，我的最佳解決方案是在矩形內的代表性示例點上調用document.elementFromPoint，這是遠遠不夠完美的，因爲它可能會遺漏元素。獲取所有元素觸摸一個矩形

在矩形的每個點上運行它都會是一個性能噩夢，因此不是一個選項。即使這是可行的，我不認爲它會抓住width: 0; height: 0的元素，儘管這不是我所關心的巨大的。

我對如何最小化使用多點法的假陰性有想法，但是有沒有真解決方案？

來源

2014-10-08 Quinn Strahl

矩形能旋轉嗎？ – Shomz 2014-10-08 14:33:20

你可能會從[這個小提琴]（http://jsfiddle.net/G5t6t/1/）得到一些想法。 – Teemu 2014-10-08 14:36:36

@Shomz我正在檢查的矩形？爲了簡單起見，假設所有邊都與視口的相應邊平行。 – 2014-10-08 14:46:08

獲取可能觸及矩形的每個元素的bounding rectangle。
對於每個元素，檢查邊界矩形和矩形是否相交。

如果您有大量元素，並且可以假設像「元素的子元素的邊界矩形總是包含在元素的邊界矩形中」，那麼可以進行一些優化。或者當元素以某種方式排列時。但是，如果任何HTML元素都可以使用任何位置，就像CSS允許的那樣，您需要全部檢查它們。

來源

2014-10-08 14:31:22

不幸的是，這個速度不夠快;該算法必須適用於非常大的文檔。 – 2014-10-08 14:48:39

@QuinnStrahl你能否假設元素的子元素邊界在元素邊界內？你有沒有一個元素樹，或者你有一個平面結構與許多元素在同一水平？或者他們以某種方式排序？恐怕沒有本地解決方案，但有一些方法可以優化這個過程。 – 2014-10-08 15:02:38

問題領域是任何任意的DOM樹，所以我不能假定一個孩子的邊界在它的父親的內部。因此它也可以是幾乎任何大小和結構的樹。好吧。 – 2014-10-09 18:05:56

如果它們平行，那麼只需爲每個矩形定義四個參數即可：x，y，寬度和高度。現在比較它們，現在比使用單個點的性能消耗要多得多，而且你會始終得到準確的結果。

來源

2014-10-08 14:48:35 Shomz

這將需要遍歷文檔中的每個元素，但是正確的？我擔心如果不在本地實施，速度不夠快。 – 2014-10-08 14:52:33

是的，它遍歷每一個元素。嗯，我不確定你是如何實現這個的，但是這裏有一個優化的想法：如果可以的話，你可以創建一個矩形數組（每個矩形將是一個數組，其中包含我在回答中提到的4個參數。 ..，爲什麼不是一個對象？因爲數組要快得多），當文檔加載時，以及每個項目位置的變化（如果這是可能的話）。所以現在，不是遍歷許多DOM元素，而是遍歷一個數組，這可能是您在JavaScript中獲得的最快速度，而且很容易進行測試。 – Shomz 2014-10-08 15:17:03

不幸的是，我不能依賴MutationObserver或DOM突變事件，因爲這段代碼必須在舊的和可怕的瀏覽器中本地運行。 – 2014-10-09 18:03:34

獲取所有元素觸摸一個矩形

回答

相關問題