seo優化排名, seo搜索引擎

網路推廣，網站排名，網站推廣，搜索網站，seo服務

<< JavaScript天書 -- 什麼是event bubbling，我如何對它進行控制？ | 如何建立網上社群 >>

JavaScript天書 -- 找到一個元素的位置與檢測游標的位置

十月 13, 2009 12:01 by author

Administrator

找到一個元素的位置

找到一個元素的準確位置是非常重要的。但是，因為不同的流覽器字體大小、內容長度不同，我們通常很難在一個網頁下載之前確定一個元素的準確位置。JavaScript提供了一種確定某個元素位置的方法，通過這種方法你可以準確瞭解一個元素的位置。

解決方法

OffsetTop和offsetLeft屬性會告訴你一個元素的頂端距離它的offsetParent頂端的距離。但是什麼是offsetParent？不同的流覽器不同的元素這個變數有所不同。有的時候，指的是包含的元素，有的時候指的是html元素，也有的時候這個變數是不存在的。

幸運的是，我們的解決方法是跟蹤offsetParents的蹤跡並且添加它們的offset位置——這個方法會告訴你一個元素在每個流覽器中的準確絕對位置。

如果問題元素沒有offsetParent，那麼元素本身的offset位置就夠了，否則，我們添加元素的offset給它的offsetParent，然後重複尋找offsetParent的過程：

IE 5 for Mac Bug

IE 5 for Mac在計算offset dimension的時候並不計算body的邊緣或者padding，所以，如果你需要在這個流覽器中的準確測量值，你需要時0邊距和0 padding。

討論

上面的方法適用於簡單和複雜的設計，但是，當一個或者多個元素的始祖的CSS位置屬性設置的不是靜態的時候，你可能就會有問題了。

隱藏位置和流覽器差異有很多種可能的方式，你幾乎無法編寫可以將它們計算在內的腳本。如果你所要處理的層次使用了很多相關的或者絕對的佈置，可能用幾個特殊的案例進行嘗試並且編寫一些特殊的功能會讓你的工作更簡單一些，下面就是你可能會遇到的幾個差異：

□ 在IE及Mozilla/Firefox中，父元素相關放置的任何元素都不會在自己的offset中包括父元素的邊界，但是，父元素的offset僅測量到自己邊界的位置。因此，這些值的和不包括邊界距離。

□ 在Opera及Safari中，任何絕對的或相對放置的元素，且offsetParent是body的元素會在自己的offset中包含body的邊距。Body的offset也會包括自己的邊距。

□ 在IE中，任何處於一個相對固定的元素內部的元素都會在自己的offset中包括相對固定元素的邊距。相對固定的元素也會包括自己的邊距。

檢測游標的位置

當用滑鼠處理事件的時候，比如滑鼠移動，你會希望將滑鼠指標的協調作為你操作的一部分（比如，將元素放在游標附近）。下面我們講的檢測游標位置的方法比前面我們討論的“查找元素位置”的方法更可靠，因此，在遇到實際問題的時候，你可以選擇這個方法。

解決方法

瞭解游標的位置所需要的所有東西都包含在event object中，雖然有些object detection要求你跨流覽器獲得等同的價值。

獲得游標相對於整個網頁的相對位置是通過event object的pageX和pageY來完成的。IE不支援這些屬性，但是它包括一些我們想要的屬性。

ClientX和clientY在IE中是可用的，儘管它們測量游標距離流覽器視窗邊距的距離。為了找到游標相對於整個網頁的位置，我們需要增加當前的滾動位置。下面讓我們用getScrollingPosition功能來獲得解決方法：

ClientX/clientY在W3C DOM事件屬性中有效，所以我們不能將它們的存在作為我們需要使用它們的一個指征。相反，在我們的event handler中，我們檢測page X的存在。IE有pageX，但它是一個錯誤的值，所以我們必須檢查x.x是一個非標準的特性，但是大多數的流覽器都支援它（除了Opera 8+和IE）。