web-dev-qa-db-fra.com

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

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

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

Ce serait formidable si vous pouviez me montrer un exemple.

javascriptipadsafarimouse-position
528
hmthr

En JavaScript:

pageX, pageY, screenX, screenY, clientX et clientY renvoie un nombre indiquant le nombre de "pixels CSS" physiques a le point est à partir du point de référence. Le point de l'é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.

clientX et clientY:
Par rapport au coin supérieur gauche de la zone de contenu entièrement restituée dans le navigateur. Ce point de référence est situé sous la barre d’URL et le bouton Précédent en haut à gauche. Ce point peut se situer n'importe où dans la fenêtre du navigateur et peut en fait changer d'emplacement s'il existe des pages à défilement incorporées dans les pages et si l'utilisateur déplace une barre de défilement.

screenX et 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 d’écrans ou la résolution de l’écran.

pageX et pageY:
Par rapport au bord supérieur gauche de la zone de contenu ( la fenêtre ) 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 lequel les navigateurs supportent quelles propriétés:

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

w3schools a un interprète et un éditeur Javascript pour vous permettre de 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>
459
Eric Leschinski

Voici une image expliquant la différence entre pageY et clientY.

pageY vs clientY

Pareil pour pageX et clientX, respectivement.

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

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

voir démo

Vous n'aurez probablement jamais besoin de screenX/Y

430
Dan
  1. pageX/Y donne les coordonnées relatives à l'élément <html> en pixels CSS.
  2. clientX/Y donne les coordonnées relatives à la viewport en pixels CSS.
  3. screenX/Y donne les coordonnées relatives à la screen en pixels de périphérique.

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 des navigateurs mobiles, nous devons distinguer deux nouveaux concepts: la vue de présentation et viewport visuel . 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 non visibles dans la fenêtre actuelle).

Sur les navigateurs mobiles, les variables pageX et pageY sont toujours relatives à la page en pixels CSS. Vous pouvez ainsi obtenir les coordonnées de la souris relatives à la page du document. Par contre, clientX et clientY définissent les coordonnées de la souris en relation avec la fenêtre d'affichage visuelle .

Il existe un autre thread stackoverflow 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

110
Simo Endre

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

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

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

Notez que pageX/Y et clientX/Y sont identiques lorsque vous faites défiler l'écran jusqu'au bout!

24
fierysunset

La différence entre ceux-ci dépendra en grande partie du navigateur auquel vous faites actuellement référence. Chacun implémente ces propriétés différemment ou pas du tout. Quirksmode possède une excellente documentation sur les différences de navigateur par rapport aux normes W3C telles que les événements DOM et JavaScript.

5
Dominic Barnes