8

指定したクエリ要素の上にあるすべての DOM 要素を効率的に見つけるにはどうすればよいですか?

つまり、DOM 要素への参照を渡すと、入力要素とゼロ以外の重複があり、その上に視覚的に表示されるすべての DOM 要素の配列を返す Javascript 関数が必要です。私の具体的な目標は、その下の要素を視覚的にブロックしている可能性のある要素を見つけることです。

コンテキストは、Web ページ、クエリ要素、またはその他の多くの高度な知識を持っていないコンテキストです。要素は、さまざまな理由で他の要素の上に表示されることがあります。

もちろん、DOM を徹底的に検索することでこれを行うこともできますが、それは非常に非効率的であり、DOM ツリーが大きくなると実用的ではありません。また、新しい elementFromPoint を使用してクエリ要素内から位置をサンプリングし、それが実際に一番上にあることを確認することもできますが、それはかなり非効率的です。

これをより良くする方法についてのアイデアはありますか？

ありがとう！

4

2 に答える 2

2

elementFromPoint を使用するよりも簡単な方法は考えられません。あなたはそれを使用したくないようですが、一貫した結果を得ることができます。多層要素がある場合は、コードを調整して、既に取得されている要素を移動するか、非表示にして関数を呼び出して新しいデータ要素のセットを取得するように設定する必要があります。

基本的な考え方について：

function upperElements(el) {
    var top = el.offsetTop,
        left = el.offsetLeft,
        width = el.offsetWidth,
        height = el.offsetHeight,
        elemTL = document.elementFromPoint(left, top),
        elemTR = document.elementFromPoint(left + width - 1, top),
        elemBL = document.elementFromPoint(left, top + height - 1),
        elemBR = document.elementFromPoint(left + width - 1, top + height - 1),
        elemCENTER = document.elementFromPoint(parseInt(left + (width / 2)), parseInt(top + (height / 2))),
        elemsUpper = [];
    if (elemTL != el) elemsUpper.push(elemTL);
    if (elemTR != el && $.inArray(elemTR, elemsUpper) === -1) elemsUpper.push(elemTR);
    if (elemBL != el && $.inArray(elemBL, elemsUpper) === -1) elemsUpper.push(elemBL);
    if (elemBR != el && $.inArray(elemBR, elemsUpper) === -1) elemsUpper.push(elemBR);
    if (elemCENTER != el && $.inArray(elemCENTER, elemsUpper) === -1) elemsUpper.push(elemCENTER);
    return elemsUpper;
}​

jsフィドル

于 2012-11-01T20:48:22.517 に答える
0

残念ながら、すべての DOM 要素を反復処理しないソリューションを用意する方法はありません。CSS ルールを使用して画面上の任意の要素を配置できるためです。

実際にすべての DOM 要素を繰り返し処理してヒット テストを行うことが最善の方法です。

これを行う必要がある場合は、絶え間なく改善されている広く使用されているクロスブラウザー API である jQuery に依存します。

http://api.jquery.com/position/、http://api.jquery.com/width/ 、 http://api.jquery.com/height/をご覧ください。

パフォーマンスが非常に重要な場合は、実装に飛び込んで特定のケースに合わせて改善することで要因を得ることができますが、複雑さが O(DOM 要素の数) を下回らないことに注意してください。

于 2012-11-01T19:56:20.897 に答える