Cela peut être une question mathématique plus qu'une question de programmation, mais nous verrons. J'essaye de construire un simple tracker de javascript que l'on pourrait ajouter à n'importe quel site Web, qui tracera ses données à une carte de chaleur.Problème intéressant: Coordonnées absolues de la souris indépendamment de la taille de la fenêtre
Le problème
Si je capture les coordonnées x/y d'un événement de clic sur une page Web affichée dans une fenêtre de mesure 1024x768, et essayer de mapper sur une carte de chaleur affichée à 1280x1024 (ou toute autre taille), il y a une bonne possibilité que le clic ne s'affiche pas dans l'emplacement correct. Si, par exemple, le contenu de la page Web est centré dans une division large de 960px, car les coordonnées x, y capturées mesurent à partir d'une origine dans le coin supérieur gauche de la fenêtre, les coordonnées ne correspondent pas dans l'espace physique. Je pourrais utiliser la différence entre les deux tailles d'écran pour créer une origine au centre de tous les écrans et mesurer à partir de là, mais je finis avec le même problème pour tout contenu qui n'est pas positionné par rapport au centre de la page.
Y at-il un moyen de développer un ensemble de coordonnées absolues d'un élément sur la page, sans connaître la taille de la fenêtre du navigateur ou ce qui est sur la page?
Je sais que je pourrais lier le clic à l'élément DOM. C'est bien, et je vais probablement faire ce chemin, mais maintenant que j'ai trouvé ce problème, je suis curieux quant à la solution possible.
Pour reformuler, voulez-vous un système de coordonnées universel qui sera toujours applicable quelles que soient les dimensions définies par l'utilisateur pour son navigateur? –
Enveloppez le contenu de la page Web dans un div et basez vos clics sur les événements. Gardez également à l'esprit si l'utilisateur redimensionne la fenêtre plus petite que votre page Web, vous aurez une barre de défilement et vous devez tenir compte du décalage de défilement. –