clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析
更新時(shí)間:2010年03月12日 20:11:37 作者:
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析,需要的朋友可以參考下。
screenX:鼠標(biāo)在顯示屏幕上的坐標(biāo)。
clientX:鼠標(biāo)在頁(yè)面顯示區(qū)域的坐標(biāo)。
注:以上兩個(gè)都是各瀏覽器通用的。
pageX:FF特有,鼠標(biāo)在頁(yè)面上的位置,從頁(yè)面左上角開(kāi)始定位,這個(gè)可以很方便在整個(gè)頁(yè)面上進(jìn)行定位,IE沒(méi)有直接替換的屬性。
layerX:FF特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素的層級(jí)關(guān)系中離該元素最近的,設(shè)置了position的父元素”的邊界的位置,從border的左上角開(kāi)始定位,即如果這個(gè)父元素存在border,則坐標(biāo)原點(diǎn)在border的左上角,而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素”的位置,從內(nèi)容區(qū)域左上角開(kāi)始定位,不是從border左上角開(kāi)始!這個(gè)屬性比較好用,用來(lái)判斷鼠標(biāo)點(diǎn)在一個(gè)元素中的哪個(gè)位置很方便,F(xiàn)F沒(méi)有直接替換的屬性。
x:IE特有,跟layerX一個(gè)效果,可作為layerX的直接替換屬性。
注:IE和FF的定位有個(gè)1px的差別,實(shí)際上,IE的定位從0開(kāi)始,F(xiàn)F的定位從1開(kāi)始,F(xiàn)F永遠(yuǎn)會(huì)比IE大1px,需要根據(jù)實(shí)際情況處理。
offsetLeft:這個(gè)屬性不是事件對(duì)象的屬性,而是DOM對(duì)象所有的,該屬性表示的是DOM對(duì)象在“該DOM對(duì)象的層級(jí)關(guān)系中離該對(duì)象最近的,設(shè)置了position的父對(duì)象”中的位置,雖然話是這么說(shuō)的,但是不同的瀏覽器效果不一樣,F(xiàn)F中嚴(yán)格按上述說(shuō)明執(zhí)行,但是在IE6/7中,這個(gè)屬性返回該DOM對(duì)象在其直接父對(duì)象中的位置,但是IE8改正了這個(gè)問(wèn)題,不過(guò)IE8又有了一個(gè)新問(wèn)題,其他的瀏覽器都是從父對(duì)象的內(nèi)容區(qū)域的左上角開(kāi)始定位,IE8確是從父元素的border的左上角開(kāi)始定位,由于測(cè)試環(huán)境為IETester中的IE8,不能排除是IETester的問(wèn)題。
clientX:鼠標(biāo)在頁(yè)面顯示區(qū)域的坐標(biāo)。
注:以上兩個(gè)都是各瀏覽器通用的。
pageX:FF特有,鼠標(biāo)在頁(yè)面上的位置,從頁(yè)面左上角開(kāi)始定位,這個(gè)可以很方便在整個(gè)頁(yè)面上進(jìn)行定位,IE沒(méi)有直接替換的屬性。
layerX:FF特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素的層級(jí)關(guān)系中離該元素最近的,設(shè)置了position的父元素”的邊界的位置,從border的左上角開(kāi)始定位,即如果這個(gè)父元素存在border,則坐標(biāo)原點(diǎn)在border的左上角,而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素”的位置,從內(nèi)容區(qū)域左上角開(kāi)始定位,不是從border左上角開(kāi)始!這個(gè)屬性比較好用,用來(lái)判斷鼠標(biāo)點(diǎn)在一個(gè)元素中的哪個(gè)位置很方便,F(xiàn)F沒(méi)有直接替換的屬性。
x:IE特有,跟layerX一個(gè)效果,可作為layerX的直接替換屬性。
注:IE和FF的定位有個(gè)1px的差別,實(shí)際上,IE的定位從0開(kāi)始,F(xiàn)F的定位從1開(kāi)始,F(xiàn)F永遠(yuǎn)會(huì)比IE大1px,需要根據(jù)實(shí)際情況處理。
offsetLeft:這個(gè)屬性不是事件對(duì)象的屬性,而是DOM對(duì)象所有的,該屬性表示的是DOM對(duì)象在“該DOM對(duì)象的層級(jí)關(guān)系中離該對(duì)象最近的,設(shè)置了position的父對(duì)象”中的位置,雖然話是這么說(shuō)的,但是不同的瀏覽器效果不一樣,F(xiàn)F中嚴(yán)格按上述說(shuō)明執(zhí)行,但是在IE6/7中,這個(gè)屬性返回該DOM對(duì)象在其直接父對(duì)象中的位置,但是IE8改正了這個(gè)問(wèn)題,不過(guò)IE8又有了一個(gè)新問(wèn)題,其他的瀏覽器都是從父對(duì)象的內(nèi)容區(qū)域的左上角開(kāi)始定位,IE8確是從父元素的border的左上角開(kāi)始定位,由于測(cè)試環(huán)境為IETester中的IE8,不能排除是IETester的問(wèn)題。
您可能感興趣的文章:
- 獲取offsetTop和offsetLeft值的js代碼(兼容)
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft (For:IE5+ FF1 )[
- 詳解 javascript中offsetleft屬性的用法
- javascript中style.left和offsetLeft的用法說(shuō)明
- 淺析offsetLeft,Left,clientLeft之間的區(qū)別
- JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
- 談?wù)剬?duì)offsetleft兼容性的理解
- window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別
- 簡(jiǎn)單談?wù)刼ffsetleft、offsetTop和offsetParent
相關(guān)文章
JavaScript 防抖和節(jié)流遇見(jiàn)的奇怪問(wèn)題及解決
這篇文章主要介紹了JavaScript 防抖和節(jié)流遇見(jiàn)的奇怪問(wèn)題及解決,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2020-11-11
PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動(dòng)加載就是我們加載實(shí)例化類的時(shí)候,不需要手動(dòng)去寫(xiě)require來(lái)導(dǎo)入這個(gè)class.php文件,程序自動(dòng)幫我們加載導(dǎo)入進(jìn)來(lái)這.篇文章主要介紹了PHP自動(dòng)加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12
原生JS實(shí)現(xiàn)H5轉(zhuǎn)盤(pán)游戲的示例代碼
這篇文章主要介紹了如何利用原生JS實(shí)現(xiàn)轉(zhuǎn)盤(pán)游戲,可以自由調(diào)整概率。文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript有一定幫助,需要的可以參考一下2022-03-03
如何在TypeScript中正確的遍歷一個(gè)對(duì)象
在TypeScript里面,也會(huì)遇到需要遍歷對(duì)象的時(shí)候,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript中正確的遍歷一個(gè)對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-03-03

