Quelle est la différence entre screenX / Y, clientX / Y et pageX / Y?

581

Quelle est la différence entre screenX/ Y, clientX/ Yet pageX/ Y?

Aussi pour iPad Safari, les calculs sont-ils similaires à ceux du bureau — OU il y a une différence à cause de la fenêtre d'affichage?

Ce serait formidable si vous pouviez me donner un exemple.

javascript ipad safari mouse-position hmthr
la source
2
Une autre démo qui utilise cinq propriétés différentes (écran, client, page, calque, décalage) pour obtenir les coordonnées de la souris.
akinuri

Réponses:

504

En JavaScript:

pageX, pageY, screenX, screenY, clientX, Et clientYrenvoie un nombre qui indique le nombre de pixels « CSS » physique est un point à partir du point de référence. Le point d'événement est l'endroit où l'utilisateur a cliqué, le point de référence est un point en haut à gauche. Ces propriétés renvoient la distance horizontale et verticale de ce point de référence.

pageXet pageY: par
rapport au coin supérieur gauche de la zone de contenu entièrement rendue dans le navigateur. Ce point de référence se trouve sous la barre d'URL et le bouton de retour en haut à gauche. Ce point peut se trouver n'importe où dans la fenêtre du navigateur et peut en fait changer d'emplacement s'il y a des pages défilantes intégrées dans les pages et que l'utilisateur déplace une barre de défilement.

screenXet screenY:
Par rapport au coin supérieur gauche de l'écran / moniteur physique, ce point de référence ne se déplace que si vous augmentez ou diminuez le nombre de moniteurs ou la résolution du moniteur.

clientXet clientY: par
rapport au bord supérieur gauche de la zone de contenu ( la fenêtre d'affichage ) de la fenêtre du navigateur. Ce point ne bouge pas même si l'utilisateur déplace une barre de défilement depuis le navigateur.

Pour un visuel sur quels navigateurs prennent en charge quelles propriétés:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools a un interprète et un éditeur Javascript en ligne pour que vous puissiez voir ce que chacun fait

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
  var x=event.clientX;
  var y=event.clientY;
  alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>

<body>

<p onmousedown="show_coords(event)">Click this paragraph, 
and an alert box will alert the x and y coordinates 
of the mouse pointer.</p>

</body>
</html>
Développer l'extrait

Eric Leschinski
la source
4
et dans jquery offsetX et offsetY sont relatifs au conteneur parent
Muhammad Umer
2
Le lien vers w3schools semble être uniquement disponible dans la section de référence maintenant: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
valide le
1
Je pense que c'est une explication trompeuse ou au moins inefficace pour pageX / pageY (et par conséquent, la question) car elle fait référence à la barre d'URL et au bouton de retour alors qu'elle est mieux expliquée en termes de contenu de la page comme par exemple dans l'explication visuelle dit la réponse. De plus, l'exemple w3schools n'est pas utile car il ne produit qu'une seule paire x / y, et il n'y a pas de défilement qui démontrerait la différence.
Robert Monfera du
4
Les explications PageX / PageY et ClientX / clientY sont échangées. vous devez le corriger. c'est trompeur
Navpreet Kaur
1
Je pense que @NavpreetKaur a raison. Cette réponse est opposée en ce qui concerne clientX vs pageX
zhouji
498

Voici une image expliquant la différence entre pageYet clientY.

pageY vs clientY

Idem pour pageXet clientX, respectivement.

pageX/Y les coordonnées sont relatives au coin supérieur gauche de toute la page rendue (y compris les parties masquées par défilement),

tandis que les clientX/Ycoordonnées sont relatives au coin supérieur gauche de la partie visible de la page, "vu" à travers la fenêtre du navigateur.

Voir la démo

Vous n'aurez probablement jamais besoin screenX/Y

Dan
la source
21
Génial, merci pour la démo, explique mieux que le texte.
Rahul Prasad
J'aime le mieux l'explication de @ SimoEndre
Pierre
9
soin de visualiser ce qui screenX/Yest?
ayjay
1
Je veux lier un événement de clic sur une zone rectangulaire particulière de la page, donc pageX/pageYdoit être utilisé à la place de clientX/clientY?
techie_28
1
qu'en est-il des simples x et y? Ils semblent les mêmes que clientX / Y quand je l'ai essayé mais je n'ai pas trouvé de référence définitive dessus
zhouji
117
  1. pageX / Y donne les coordonnées relatives à l' <html>élément en pixels CSS.
  2. clientX / Y donne les coordonnées par rapport aux viewportpixels CSS.
  3. screenX / Y donne les coordonnées par rapport aux screenpixels de l'appareil.

En ce qui concerne votre dernière question si les calculs sont similaires sur les navigateurs de bureau et mobiles ... Pour une meilleure compréhension - sur les navigateurs mobiles - nous devons différencier deux nouveaux concepts: la fenêtre de présentation et la fenêtre visuelle . La fenêtre d'affichage est la partie de la page actuellement affichée à l'écran. La fenêtre de présentation est synonyme d'une page complète rendue sur un navigateur de bureau (avec tous les éléments qui ne sont pas visibles dans la fenêtre actuelle).

Sur les navigateurs mobiles, les pageXet pageYsont toujours relatifs à la page en pixels CSS afin que vous puissiez obtenir les coordonnées de la souris par rapport à la page du document. D'autre part clientXet clientYdéfinir les coordonnées de la souris par rapport à la fenêtre visuelle .

Il y a un autre thread stackoverflow ici concernant les différences entre la fenêtre de visualisation et la fenêtre de présentation: Différence entre la fenêtre de visualisation et la fenêtre de présentation?

Une autre bonne ressource: http://www.quirksmode.org/mobile/viewports2.html

Endre Simo
la source
27

Ce qui m'a aidé, c'est d'ajouter un événement directement sur cette page et de cliquer pour moi! Ouvrez votre console dans les outils de développement / Firebug etc. et collez ceci:

document.addEventListener('click', function(e) {
  console.log(
    'page: ' + e.pageX + ',' + e.pageY,
    'client: ' + e.clientX + ',' + e.clientY,
    'screen: ' + e.screenX + ',' + e.screenY)
}, false);
Click anywhere
Développer l'extrait

Avec cet extrait, vous pouvez suivre la position de votre clic lorsque vous faites défiler, déplacez la fenêtre du navigateur, etc.

Notez que pageX / Y et clientX / Y sont les mêmes lorsque vous faites défiler vers le haut!

fierysunset
la source
5

La différence entre ceux-ci dépendra en grande partie du navigateur auquel vous vous référez actuellement. Chacun met en œuvre ces propriétés différemment, ou pas du tout. Quirksmode a une excellente documentation concernant les différences de navigateur en ce qui concerne les normes W3C comme les événements DOM et JavaScript.

Dominic Barnes
la source
4
Votre réponse est bonne, mais elle deviendra bientôt obsolète quirksmode.org/mobile/tableViewport_desktop.html
Dan