Quelle est la différence entre screenX/Y clientX/Y et pageX/Y ?
Aussi pour iPad Safari, sont les calculs semblables comme sur bureau ou il y a une différence quelconque à cause de la fenêtre d’affichage ?
Il serait génial si vous pouviez m’indiquer un exemple.
En JavaScript:
pageX, pageY, screenX, screenY, clientX et clientY renvoie un nombre qui indique le nombre de pixels qu'un point est à partir du point de référence. L'événement est le point où l'utilisateur a cliqué, le point de référence est un point dans le coin supérieur gauche. Ces propriétés retour de la distance horizontale et verticale de ce point de référence.
pageX et pageY:
Par rapport au haut à gauche de l'rendu complète de la zone de contenu dans le navigateur. De ce point de référence est en dessous de la barre d'url et bouton de retour en haut à gauche. Ce point pourrait être n'importe où dans la fenêtre du navigateur et peut réellement changer de lieu si il y a intégré avec défilement des pages intégrés dans les pages et l'utilisateur se déplace d'une barre de défilement.
screenX et screenY:
Par rapport à la partie supérieure gauche de l'écran/moniteur, de ce point de référence se déplace uniquement si vous augmentez ou diminuez le nombre de moniteurs ou de la résolution de l'écran.
clientX et clientY:
Par rapport au bord supérieur gauche de la fenêtre du navigateur. Ce point peut se déplacer lorsque l'utilisateur déplace/redimensionne le navigateur autour du moniteur. Ce point ne bouge pas si l'utilisateur se déplace d'une barre de défilement du navigateur.
Pour un visuel sur lequel des navigateurs prennent en charge les propriétés:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
w3schools en ligne interpréteur Javascript et éditeur de sorte que vous pouvez voir ce que chacun fait
http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_clientxy
<html> élément en CSS pixels.viewport en CSS pixels.screen dans le dispositif de pixels.Concernant votre dernière question, si les calculs sont similaires sur le bureau et les navigateurs mobiles... Pour une meilleure compréhension sur les navigateurs mobiles - nous devons distinguer deux nouveau concept: la fenêtre d'affichage à disposition et visual fenêtre d'affichage. Le visuel fenêtre d'affichage est la partie de la page qui est actuellement affichée à l'écran. La fenêtre d'affichage à disposition est synonyme d'une pleine page affichée sur un navigateur de bureau (avec tous les éléments qui ne sont pas visibles dans la fenêtre actuelle).
Sur les navigateurs mobiles l' pageX et pageY sont toujours par rapport à la page en CSS pixels de sorte que vous pouvez obtenir les coordonnées de la souris par rapport à la page du document. D'autre part clientX et clientY définir les coordonnées de la souris par rapport à la fenêtre d'affichage visuel.
Il y a un autre stackoverflow fil ici sur les différences entre les visuels de fenêtre de la fenêtre d'affichage et la mise en page : Différence entre le visuel fenêtre et de la fenêtre d'affichage à disposition?
Une autre bonne ressource: http://www.quirksmode.org/mobile/viewports2.html
Ce qui m’a aidé, c’était pour ajouter un événement directement à cette page et cliquez sur autour pour moi ! Ouvrir votre console dans developer tools/Firebug etc. et collez ceci :
Avec la console ouverte à côté de cette fenêtre, vous pouvez suivre votre position de clic lorsque vous faites défiler, déplacer la fenêtre du navigateur, etc..
Notez que pageX/an et clientX/an sont les mêmes lorsque vous avez navigué tout le chemin vers le haut !
La différence entre ceux qui dépendra en grande partie sur quel navigateur vous font actuellement référence à. Chacun d’eux implémente ces propriétés différemment ou pas du tout. Quirksmode a grande documentation concernant les différences entre les navigateurs en ce qui concerne les normes W3C comme les DOM et les événements JavaScript.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
