Étant donné une coordonnée x, y, j'ai besoin de trouver tous les éléments html en dessous

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

(1) Passez à travers le html, créez une structure de données qui surveille la position x, y de chaque élément (x, y -> ensemble d'éléments), puis accédez à cette structure de données lorsque je dois effectuer 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 survoltage, pour fausser un survol de la souris à la position particulière, puis supprimer le gestionnaire, mais il semble que cela le fera Ne renvoie que l'élément le plus haut (par exemple, s'il existe un tas de divisions de position absolue sur un emplacement particulier, je pense qu'il ne renverra que celui avec l'indice z le plus élevé, alors que j'ai besoin de tout, même si je ne suis pas sûr ).

(3) Pour IE, il existe 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 conçue comme un bookmarklet et je n'ai aucun contrôle sur le html sous-jacent – cela réduit malheureusement toutes les solutions faciles au serveur.

Je suis prêt à utiliser les bibliothèques (actuellement sur jquery).

FYI, jusqu'à présent, le meilleur que j'ai trouvé ici est Obtenir l'ID DIV basé sur la position x & y ; Se demandant s'il y a quelque chose de plus à jour.

Vous pouvez chercher la méthode elementFromPoint qui existe dans MSIE, FF3 + et sous une forme quelconque dans Safari et Opera. Il est également utile de regarder le getBoundingClientRect . Combinez les deux et vous devriez être en affaires.

Vous pourriez également être en mesure d'accélérer l'approche n ° 1 en gardant la structure calculée entre les recherches et de les recalculer uniquement lorsque des modifications se produisent réellement sur la page. Regardez comment les moteurs de sélection (Sizzle in paticular) cachent leurs recherches et expirent 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'ici. Il y a une douzaine de personnes libres qui ont ces choses correctement optimisées (mon intuition est que YUI aura le code le plus lisible). Ceux-ci peuvent être datés ou essayer de prendre en charge les navigateurs que vous ne voulez / ne devez pas faire.