Question 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?

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 génial si vous pouviez me montrer un exemple.


452
2018-05-20 14:38


origine


Réponses:


En JavaScript:

pageX, pageY, screenX, screenY, clientX et clientY renvoient un nombre qui indique le nombre de "pixels CSS" physiques par rapport au 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 dans le coin supérieur gauche. Ces propriétés renvoient la distance horizontale et verticale à partir de ce point de référence.

pageX et pageY:
Relatif à la partie supérieure 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 être n'importe où dans la fenêtre du navigateur et peut en fait changer d'emplacement si des pages déroulantes intégrées sont intégrées dans les pages et que l'utilisateur déplace une barre de défilement.

screenX et screenY:
Relativement au coin supérieur gauche de l'écran / du 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.

clientX et clientY:
Par rapport au bord supérieur gauche de la zone de contenu (la vue) 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 les propriétés:

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

w3schools dispose d'un interpréteur et é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>


396
2018-02-17 21:16



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

pageY vs clientY

Pareil pour pageX et clientX, respectivement.


pageX/Y les coordonnées sont relatives au coin supérieur gauche de toute la page rendue (y compris les parties caché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" à travers la fenêtre du navigateur.

Voir la démo

Vous n'aurez probablement jamais besoin screenX/Y


349
2018-01-30 09:48



  1. pageX / Y donne les coordonnées relatives à la <html> élément 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 dans les pixels de l'appareil.

Concernant votre dernière question, si les calculs sont similaires sur les navigateurs de bureau et mobiles ... Pour mieux comprendre - sur les navigateurs mobiles - nous devons différencier deux nouveaux concepts: le fenêtre de présentation et vue visuelle. La zone de visualisation est la partie de la page actuellement affichée à l'écran. La fenêtre de présentation est synonyme d'une page entière affichée sur un navigateur de bureau (avec tous les éléments qui ne sont pas visibles dans la fenêtre courante).

Sur les navigateurs mobiles le pageX et pageY sont 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 clientX et clientYdéfinir les coordonnées de la souris par rapport à la vue visuelle.

Il existe un autre thread stackoverflow concernant les différences entre la fenêtre d'affichage visuelle 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


108
2017-07-01 08:26



Ce qui m'a aidé a été 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-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, vous pouvez suivre votre position de clic pendant que vous faites défiler, déplacez la fenêtre de navigateur, etc.

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


16
2017-08-11 04:03



La différence entre ceux-ci dépendra largement du navigateur auquel vous faites actuellement référence. Chacun implémente ces propriétés différemment ou pas du tout. Mode de quirks a une grande documentation concernant les différences de navigateur en ce qui concerne les normes du W3C comme les événements DOM et JavaScript.


5
2018-05-20 14:42