Étant donné une coordonnée x, y, je dois trouver tous les éléments html en dessous

Question

Je construis une application où j'ai besoin à plusieurs reprises d'obtenir des listes d'éléments html assis sous un emplacement spécifique (x, y par rapport à la fenêtre, par exemple) . Je considère les approches suivantes, mais aucune n'est satisfaisante:

(1) Passez par le html, construisez une structure de données qui garde la trace de la position x, y de chaque élément (x, y -> ensemble d'éléments), puis accédez à cette structure de données lorsque j'ai besoin de faire une recherche. Malheureusement, cette approche est un peu lourde et je cherche une meilleure façon de résoudre ce problème. De plus, je crains que cela ne soit trop lent.

(2) Une approche probablement meilleure que je considère est d'ajouter temporairement un gestionnaire d'événements de haut niveau qui capture tous les événements de survol, de simuler un survol de la souris à la position particulière, On dirait que cela ne retournera que l'élément le plus haut (par exemple, s'il y a un groupe de divs en position absolue sur un emplacement particulier, je pense qu'il ne retournera que celui avec l'indice z le plus élevé, alors que j'ai besoin Je ne suis pas sûr).

(3) Pour IE, il y a componentFromPoint (x, y), mais je ne trouve pas d'équivalent dans un autre navigateur - et cela ne renvoie que l'élément le plus haut.

Notez que l'application est construite sous la forme d'un bookmarklet et que je n'ai aucun contrôle sur le code html sous-jacent, ce qui limite malheureusement toute solution côté serveur. Je suis prêt à utiliser des bibliothèques (actuellement sur jquery).

FYI, le meilleur que j'ai trouvé ici est Getting DIV id based on x & y position; Je me demande s'il y a quelque chose de plus à jour.

Answer 1

Vous recherchez peut-être la méthode elementFromPoint qui existe dans MSIE, FF3 + et sous une forme quelconque dans Safari et Opera. Il peut être intéressant de jeter un oeil à getBoundingClientRect. Combinez les deux et vous devriez être en affaires.

Vous pouvez également accélérer l'approche n ° 1 en conservant la structure calculée entre les recherches et ne la recalculer que lorsque des changements se produisent réellement sur la page. Jetez un oeil à la façon dont les moteurs de sélection (Sizzle in paticular) mettent en cache leurs recherches et expire le cache lorsque le DOM change.

Cela peut sembler artificiel, mais le calcul de la position de chaque élément est ce que les gestionnaires de glisser-déposer ont fait jusqu'à présent. Il y en a une douzaine de gratuits qui ont ce truc correctement optimisé (mon intuition est que YUI aura le code le plus lisible). Ceux-ci peuvent être datés si ou en essayant de soutenir les navigateurs que vous ne voulez pas/devez.