offsetTop vs. jQuery.offset(). Top

Question

Ho letto che offsetLeft e offsetTop non funzionano correttamente in tutti i browser. jQuery.offset() dovrebbe fornire un'astrazione per fornire il valore corretto xbrowser.

Quello che sto cercando di fare è ottenere le coordinate di dove è stato fatto clic su un elemento rispetto all'angolo superiore sinistro dell'elemento.

Il problema è che jQuery.offset().top mi sta effettivamente fornendo un valore decimale in FFX 3.6 (in IE e Chrome, i due valori corrispondono).

http://jsfiddle.net/htCPp/ presenta il problema. Se si sceglie l'immagine in basso, jQuery.offset().top restituisce 327,5, ma offsetTop rendimenti 328.

Vorrei pensare che offset() sta tornando il valore corretto e dovrei usarlo perché funzionerà tutti i browser. Tuttavia, le persone ovviamente non possono fare clic su decimali di pixel. È il modo corretto per determinare l'offset vero a Math.Round() l'offset restituito da jQuery? Dovrei usare invece offsetTop o qualche altro metodo?

Answer 1

penso che tu abbia ragione dicendo che le persone non possono fare clic e mezzo pixel, quindi personalmente, userei compensato arrotondata jQuery ...

Answer 2

È possibile utilizzare parseInt(jQuery.offset().top) utilizzare sempre al numero intero (primitiva - int) valore in tutti i browser.

Answer 3

È possibile che il offset potrebbe essere un non intero, utilizzando em come unità di misura, relativa font-sizes in %.

Inoltre, teorizzo che lo offset potrebbe non essere un numero intero quando lo zoom non è 100% ma dipende da come il browser gestisce il ridimensionamento.

Answer 4

Prova questo: parseInt(jQuery.offset().top, 10)

Answer 5

Questo è ciò che jQuery API Doc dice di .offset():

ottenere le coordinate correnti del primo elemento, o impostare le coordinate di ogni elemento, nel set di elementi abbinati , relativo al documento .

Questo è ciò MDN Web API dice di .offsetTop:

offsetTop restituisce la distanza dell'elemento corrente rispetto superiore del nodo offsetParent

Questo è quanto jQuery v .1.11 .offset() fondamentalmente fare quando ottenere le coordinate:

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 dice intuitivamente quanto è stata la pagina di scorrere
• docElem.scrollTop è il ripiego per IE < 9 (che sono BTW non supportato in jQuery 2)
• docElem.clientTop è la larghezza del bordo superiore di un elemento (il documento in questo caso)
• elem.getBoundingClientRect() ottiene le relazioni relative al documento viewport (vedere i commenti). Può restituire valori di frazione, quindi questa è la fonte del tuo bug. È anche may cause a bug in IE<8 quando la pagina viene ingrandita. Per evitare i valori di frazione, prova a calcolare la posizione iteratively

Conclusione

• Se si desidera coordinate relative al nodo genitore , utilizzare element.offsetTop. Aggiungi element.scrollTop se vuoi tenere conto dello scrolling genitore. (o utilizzare jQuery .position() se si è fan di quella libreria)
• Se si desidera il collegamento relativo alla vista utilizzare element.getBoundingClientRect().top. Aggiungi window.pageYOffset se vuoi tenere conto dello scorrimento del documento. Non è necessario sottrarre il documento di clientTop se il documento non ha confini (di solito non è così), in modo da avere posizione rispetto al documento
• Sottrai element.clientTop se non si considera il confine elemento come parte dell'elemento