Question Comment trouver le nœud DOM qui se trouve à une position donnée (X, Y)? (Hit test)


J'ai les coordonnées (X, Y) d'un point dans un document HTML. Comment puis-je déterminer quel noeud DOM est à ces coordonnées?

Quelques idées:

  • Y a-t-il une fonction de test de hit DOM que j'ai manquée, qui prend un point (X, Y) et retourne l'élément DOM à cet endroit?
  • Existe-t-il un moyen efficace de parcourir l’arbre des éléments DOM pour trouver l’élément contenant? Cela semble être difficile à cause des éléments absolument positionnés.
  • Existe-t-il un moyen de simuler un événement à une position donnée (X, Y) de telle sorte que le navigateur finisse par créer un objet événement ayant un pointeur sur l'élément?

(Arrière-plan: j'intègre QWebView de Qt dans une application native. J'essaie de faire varier le menu contextuel fourni par le widget Qt en fonction du noeud DOM terminé, mais Qt 4.5 ne peut pas tester un élément DOM, bien que cette fonctionnalité arrive en 4.6. J'espère pouvoir lancer la coordonnée dans Javascript et faire les tests de hit avec les API DOM.)

Merci!


21
2017-10-15 00:57


origine


Réponses:


Tant que vos utilisateurs n’utilisent pas d’anciennes versions de Safari, Chrome ou Opera, vous avez de la chance: utilisez document.elementFromPoint(x, y) (Réf MSDN, Mozilla ref, Article QuirksMode):

Renvoie l'élément du document   ... qui est l'élément le plus élevé qui   se situe sous le point donné.

Si vous avez besoin de prendre en charge des navigateurs plus anciens, je ne peux pas penser à beaucoup d’autres options que celles que vous proposez (traverser tout le DOM, examiner les positions et les tailles des éléments et voir si certaines d’entre elles).

Je ne pense pas que la simulation d'événement fonctionnera mais c'est une idée intéressante. D'après ce que je comprends de la répartition des événements, vous spécifiez la cible à laquelle l'événement est destiné, ce que vous essayez précisément de trouver en premier lieu.


22
2017-10-15 01:27



Dans IE existent document.body.componentFromPoint(x,y). Je ne sais pas s'il existe une implémentation entre navigateurs.


1
2017-10-15 01:27



Ce n’est probablement pas la meilleure solution, mais vous pouvez parcourir l’arbre des noms de domaine en commençant par rechercher les coordonnées des nœuds ancêtres contenant vos positions x et y et accéder rapidement au nœud feuille contenant vos coordonnées. Pour obtenir les positions d'un nœud dans un navigateur, vous pouvez consulter les kits d'outils JS. Celui que j'ai utilisé est le dojo. Jetez un oeil à dojo._getMarginBox ici


1
2017-10-15 01:29



document.elementFromPoint(x,y)

Documenté ici pour Firefox 3 et ici pour IE, mais voir Mode de quirks pour les différences entre les navigateurs.


1
2017-10-15 01:32



Vous pouvez utiliser jQuery pour cela. Je lierais tous les éléments dom nécessaires à l’événement click, cela me donnera l’objet dom approprié lors du clic ainsi que position de la souris.


0
2017-10-15 03:04