x、y座標を指定すると、その下にあるすべてのhtml要素を見つける必要があります

Question

私は、特定の場所（x、y、ビューポートからの相対位置）にあるhtml要素のリストを繰り返し取得する必要があるアプリケーションを構築しています。 。私は以下のアプローチを検討していますが、満足するものはありません：

（1）すべての要素のx、y位置）、次にルックアップが必要なときにこのデータ構造にアクセスします。残念ながら、この方法はやや面倒で、この問題を解決するためのより良い方法を探しています。プラス、私はそれが遅すぎるかもしれないことを恐れる。

（2）私が考えているのは、すべてのホバーイベントをキャプチャし、特定の位置でマウスをホバーし、ハンドラを削除するためのトップレベルのイベントハンドラを一時的に追加することですこれは一番上の要素のみを返すように見えます（たとえば、ある特定の場所に絶対位置divがある場合、z-indexが最も高いものが返されますが、すべて必要ですが私はわかりません）。

（3）IEの場合、componentFromPoint（x、y）がありますが、他のブラウザで同等のものを見つけることができません - それは最上位の要素のみを返します。

このアプリはブックマークレットとして構築されており、基礎となるHTMLを制御することはできません。これは残念なことにサーバー側の簡単なソリューションを縮小します。

私はライブラリを（現在jquery上に）使用しています。

参考までに、ここで私が見つけた最高のものはGetting DIV id based on x & y positionです。もっと最新のものがあるのだろうかと思っています。

Answer 1

MSIE、FF3 +、およびSafariとOperaで何らかの形で存在するelementFromPointメソッドを探している可能性があります。 getBoundingClientRectをご覧ください。 2つを組み合わせると、あなたはビジネスに就くべきです。

アプローチ1の速度を上げるには、計算構造をルックアップの間に置いて、ページ上で実際に変更が発生した場合にのみ再計算します。セレクタエンジン（paticularのSizzle）がどのようにルックアップをキャッシュし、DOMが変更されたときにキャッシュが満了するかを見てみましょう。

おそらく、すべての要素の位置を計算することは、今までドラッグアンドドロップハンドラが行ってきたことです。そこには、適切に最適化されたものを持っている十数の無料のものがあります（私の感心は、YUIのコードが最も読みやすいでしょう）。これらは、あなたが欲しくない/必要としないブラウザに日付を記入したり、サポートしたりしようとしているかもしれません。