clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析
更新時間:2010年03月12日 20:11:37 作者:
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析,需要的朋友可以參考下。
screenX:鼠標(biāo)在顯示屏幕上的坐標(biāo)。
clientX:鼠標(biāo)在頁面顯示區(qū)域的坐標(biāo)。
注:以上兩個都是各瀏覽器通用的。
pageX:FF特有,鼠標(biāo)在頁面上的位置,從頁面左上角開始定位,這個可以很方便在整個頁面上進行定位,IE沒有直接替換的屬性。
layerX:FF特有,鼠標(biāo)相對于“觸發(fā)事件的元素的層級關(guān)系中離該元素最近的,設(shè)置了position的父元素”的邊界的位置,從border的左上角開始定位,即如果這個父元素存在border,則坐標(biāo)原點在border的左上角,而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有,鼠標(biāo)相對于“觸發(fā)事件的元素”的位置,從內(nèi)容區(qū)域左上角開始定位,不是從border左上角開始!這個屬性比較好用,用來判斷鼠標(biāo)點在一個元素中的哪個位置很方便,F(xiàn)F沒有直接替換的屬性。
x:IE特有,跟layerX一個效果,可作為layerX的直接替換屬性。
注:IE和FF的定位有個1px的差別,實際上,IE的定位從0開始,F(xiàn)F的定位從1開始,F(xiàn)F永遠(yuǎn)會比IE大1px,需要根據(jù)實際情況處理。
offsetLeft:這個屬性不是事件對象的屬性,而是DOM對象所有的,該屬性表示的是DOM對象在“該DOM對象的層級關(guān)系中離該對象最近的,設(shè)置了position的父對象”中的位置,雖然話是這么說的,但是不同的瀏覽器效果不一樣,F(xiàn)F中嚴(yán)格按上述說明執(zhí)行,但是在IE6/7中,這個屬性返回該DOM對象在其直接父對象中的位置,但是IE8改正了這個問題,不過IE8又有了一個新問題,其他的瀏覽器都是從父對象的內(nèi)容區(qū)域的左上角開始定位,IE8確是從父元素的border的左上角開始定位,由于測試環(huán)境為IETester中的IE8,不能排除是IETester的問題。
clientX:鼠標(biāo)在頁面顯示區(qū)域的坐標(biāo)。
注:以上兩個都是各瀏覽器通用的。
pageX:FF特有,鼠標(biāo)在頁面上的位置,從頁面左上角開始定位,這個可以很方便在整個頁面上進行定位,IE沒有直接替換的屬性。
layerX:FF特有,鼠標(biāo)相對于“觸發(fā)事件的元素的層級關(guān)系中離該元素最近的,設(shè)置了position的父元素”的邊界的位置,從border的左上角開始定位,即如果這個父元素存在border,則坐標(biāo)原點在border的左上角,而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有,鼠標(biāo)相對于“觸發(fā)事件的元素”的位置,從內(nèi)容區(qū)域左上角開始定位,不是從border左上角開始!這個屬性比較好用,用來判斷鼠標(biāo)點在一個元素中的哪個位置很方便,F(xiàn)F沒有直接替換的屬性。
x:IE特有,跟layerX一個效果,可作為layerX的直接替換屬性。
注:IE和FF的定位有個1px的差別,實際上,IE的定位從0開始,F(xiàn)F的定位從1開始,F(xiàn)F永遠(yuǎn)會比IE大1px,需要根據(jù)實際情況處理。
offsetLeft:這個屬性不是事件對象的屬性,而是DOM對象所有的,該屬性表示的是DOM對象在“該DOM對象的層級關(guān)系中離該對象最近的,設(shè)置了position的父對象”中的位置,雖然話是這么說的,但是不同的瀏覽器效果不一樣,F(xiàn)F中嚴(yán)格按上述說明執(zhí)行,但是在IE6/7中,這個屬性返回該DOM對象在其直接父對象中的位置,但是IE8改正了這個問題,不過IE8又有了一個新問題,其他的瀏覽器都是從父對象的內(nèi)容區(qū)域的左上角開始定位,IE8確是從父元素的border的左上角開始定位,由于測試環(huán)境為IETester中的IE8,不能排除是IETester的問題。
您可能感興趣的文章:
- 獲取offsetTop和offsetLeft值的js代碼(兼容)
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft (For:IE5+ FF1 )[
- 詳解 javascript中offsetleft屬性的用法
- javascript中style.left和offsetLeft的用法說明
- 淺析offsetLeft,Left,clientLeft之間的區(qū)別
- JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
- 談?wù)剬ffsetleft兼容性的理解
- window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別
- 簡單談?wù)刼ffsetleft、offsetTop和offsetParent
相關(guān)文章
javascript實現(xiàn)網(wǎng)頁端解壓并查看zip文件
昨天給大家分享了在網(wǎng)頁端使用zip.js插件實現(xiàn)在線壓縮文件的代碼,今天給大家分享一下javascript實現(xiàn)網(wǎng)頁端解壓并查看zip文件的方法,非常的實用,有需要的小伙伴可以參考下2015-12-12關(guān)于webpack2和模塊打包的新手指南(小結(jié))
本篇文章主要介紹了關(guān)于webpack2和模塊打包的新手指南(小結(jié)),具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-08-08Javascript 完美運動框架(逐行分析代碼,讓你輕松了運動的原理)
這篇文章主要介紹了Javascript 完美運動框架,逐行分析代碼,讓你輕松了運動的原理,需要的朋友可以參考下2015-01-01onkeydown事件解決按回車鍵直接提交數(shù)據(jù)的需求
登陸頁面需要撲捉用戶按下回車自動提交的需求,于是相到在body里添加onkeydown事件跳javascript在提交表單,具體看下實現(xiàn)代碼,希望對你有所幫助2013-04-04