offsetTop vs. jQuery.offset().top

Question

J'ai lu que offsetLeft y offsetTop ne fonctionnent pas correctement dans tous les navigateurs. jQuery.offset() est censé fournir une abstraction pour cela afin de fournir la valeur correcte xbrowser.

Ce que j'essaie de faire, c'est d'obtenir les coordonnées de l'endroit où un élément a été cliqué par rapport à la partie supérieure gauche de l'élément.

Le problème est que jQuery.offset().top me donne en fait une valeur décimale dans FFX 3.6 (dans IE et Chrome, les deux valeurs correspondent).

Ce violon expose le problème. Si vous cliquez sur l'image du bas, jQuery.offset().top renvoie 327,5, mais offsetTop retourne 328.

J'aimerais penser que offset() renvoie la valeur correcte et je devrais l'utiliser car il fonctionnera sur tous les navigateurs. Cependant, il est évident que les gens ne peuvent pas cliquer sur des décimales de pixels. Quelle est la bonne façon de déterminer le véritable décalage de l'image ? Math.round() le décalage que jQuery renvoie ? Dois-je utiliser offsetTop à la place, ou une autre méthode entièrement différente ?

Answer 1

C'est ce que Doc. API jQuery dit à propos de .offset() :

Obtenez les coordonnées actuelles du premier élément, ou définissez le paramètre coordonnées de chaque élément, dans l'ensemble des éléments appariés, par rapport aux coordonnées du premier élément. par rapport à l'élément document .

C'est ce que API Web MDN dit à propos de .offsetTop :

offsetTop renvoie la distance de l'élément courant par rapport à l'élément haut de l'élément nœud offsetParent

C'est ce que fait jQuery v.1.11 .offset() pour obtenir les coordonnées :

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

• pageYOffset indique intuitivement combien de fois la page a défilé.
• docElem.scrollTop est la solution de repli pour IE<9 (qui ne sont pas supportés dans jQuery 2).
• docElem.clientTop est la largeur de la bordure supérieure d'un élément (le document dans ce cas)
• elem.getBoundingClientRect() obtient les coordonnées relatives à la document fenêtre d'observation (voir les commentaires). Il peut renvoyer des valeurs fractionnées, c'est donc la source de votre bogue. Il peut également peut causer un bug dans IE<8 lorsque la page est zoomée. Pour éviter les valeurs fractionnées, essayez de calculer la position itérativement

Conclusion

• Si vous voulez des coordonnées relatives à la nœud parent utiliser element.offsetTop . Ajouter element.scrollTop si vous voulez prendre en compte le défilement du parent. (ou utilisez jQuery .position() si vous êtes fan de cette bibliothèque)
• Si vous voulez des coordonnées relatives à la fenêtre d'observation utiliser element.getBoundingClientRect().top . Ajouter window.pageYOffset si vous voulez prendre en compte le défilement du document. Il n'est pas nécessaire de soustraire la valeur de l'indicateur clientTop si le document n'a pas de bordure (ce qui n'est généralement pas le cas), vous avez donc une position relative à l'élément document
• Soustraire element.clientTop si vous ne considérez pas la bordure de l'élément comme une partie de l'élément

Answer 2

Je pense que vous avez raison de dire que les gens ne peuvent pas cliquer sur des demi-pixels, donc personnellement, j'utiliserais un décalage jQuery arrondi...

Answer 3

Essayez ça : parseInt(jQuery.offset().top, 10)

Answer 4

Il est possible que le offset peut être un nombre non entier, en utilisant em comme unité de mesure, relative font-sizes sur % .

Je pense également que le offset peut ne pas être un nombre entier lorsque le zoom n'est pas 100% mais cela dépend de la façon dont le navigateur gère la mise à l'échelle.

Answer 5

Vous pouvez utiliser parseInt(jQuery.offset().top) pour toujours utiliser l'Integer (primitif) int ) dans tous les navigateurs.