Coordonnées d'écran d'un élément, via Javascript

Question

J'essaie d'obtenir les coordonnées d'écran (c'est-à-dire par rapport au coin supérieur gauche de l'écran) d'un élément dans une fenêtre de navigateur. Il est facile d'obtenir la taille et la position de la fenêtre (screenX, screenY) et il est facile (avec jQuery) d'obtenir le décalage de l'élément ($('element').offset().left).

Cependant, j'ai besoin de savoir combien de pixels il y a entre l'élément et le coin de l'écran. J'ai trouvé certaines choses qui semblent être spécifiques à IE, mais j'aimerais que cela fonctionne dans le plus grand nombre de navigateurs possible.

Modifié pour ajouter une photo :

Answer 1

window.screenX/Y ne sont pas prises en charge par IE. Mais pour les autres navigateurs, une approximation proche de la position l'est :

var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;

La position exacte dépend des barres d'outils visibles. Vous pouvez utiliser la outer/innerWidth y outer/innerHeight les propriétés de la window objet à rapprocher un peu plus.

IE ne fournit pas beaucoup de propriétés de fenêtre, mais curieusement, un objet d'événement de clic vous fournira l'emplacement du clic sur l'écran. Je suppose donc que vous pourriez avoir une page de calibration qui demande à l'utilisateur de "cliquer sur le point rouge" et gérer l'événement avec

function calibrate(event){
    var top = event.screenY;
    var left = event.screenX;
}

Ou éventuellement utiliser le mouseenter/leave en utilisant les coordonnées de cet événement pour le calibrer. Mais vous auriez du mal à déterminer si la souris est entrée par la gauche, la droite, le haut ou le bas.

Bien sûr, dès qu'ils déplaceront l'écran, vous devrez le recalibrer.

Pour en savoir plus sur les compatibilités des propriétés des navigateurs, voir Les tables du modèle d'objet de PPK .

Answer 2

Je ne suis pas d'accord avec la réponse de Jvenema.

J'ai trouvé une solution qui fonctionne pour moi sur google chrome en tout cas, mais j'espère que cela fonctionnera sur beaucoup d'autres navigateurs aussi (peut-être pas sur certains vieux internet explorers).

A l'intérieur de la <script> les tags déclarent deux nouveaux mondial des variables appelées : pageX et pageY avec l'attribut var mot-clé.

Ces variables globales doivent toujours stocker les coordonnées du coin supérieur gauche de l'écran de l'ordinateur. page rendue par rapport au coin supérieur gauche de l'écran du moniteur, mais pour atteindre cet objectif, l'option window.onmousemove doit faire référence à une fonction qui définit la pageX à la différence entre event.screenX et event.clientX, et la pageY à la différence entre event.screenY et event.clientY.

Il suffit alors d'obtenir les coordonnées d'un élément (par rapport au coin supérieur gauche de la page rendue) et d'ajouter pageX et pageY. Les résultats de ces expressions seront les coordonnées de cet élément par rapport au coin supérieur gauche de la page rendue. écran de contrôle !

Exemple de code (uniquement javascript) :

<script>
    var pageX;
    var pageY;
    window.onmousemove = function (e) {
       pageX = e.screenX - e.clientX;
       pageY = e.screenY - e.clientY;
    }
    function getScreenCoordinatesOf(obj) {
       var p = {};
       p.x = pageX + obj.clientLeft;
       p.y = pageY + obj.clientTop;
       return p;
    }
</script>

J'espère que cela vous aidera !

Answer 3

Je ne pense pas que ce soit possible.

Les coordonnées de l'élément sont relatives au coin supérieur gauche de la page rendue.

Les coordonnées de la fenêtre sont relatives à l'écran.

Il n'y a, à ma connaissance, rien qui relie le coin supérieur gauche du page rendue dans le coin supérieur gauche de la fenêtre . Il n'y a donc aucun moyen de tenir compte des bordures, des barres de défilement, du chrome, etc. Je pense donc que vous êtes fichu sur ce point.