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)在頁面顯示區(qū)域的坐標(biāo)。
注:以上兩個(gè)都是各瀏覽器通用的。
pageX:FF特有,鼠標(biāo)在頁面上的位置,從頁面左上角開始定位,這個(gè)可以很方便在整個(gè)頁面上進(jìn)行定位,IE沒有直接替換的屬性。
layerX:FF特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素的層級(jí)關(guān)系中離該元素最近的,設(shè)置了position的父元素”的邊界的位置,從border的左上角開始定位,即如果這個(gè)父元素存在border,則坐標(biāo)原點(diǎn)在border的左上角,而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素”的位置,從內(nèi)容區(qū)域左上角開始定位,不是從border左上角開始!這個(gè)屬性比較好用,用來判斷鼠標(biāo)點(diǎn)在一個(gè)元素中的哪個(gè)位置很方便,F(xiàn)F沒有直接替換的屬性。
x:IE特有,跟layerX一個(gè)效果,可作為layerX的直接替換屬性。
注:IE和FF的定位有個(gè)1px的差別,實(shí)際上,IE的定位從0開始,F(xiàn)F的定位從1開始,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ì)象”中的位置,雖然話是這么說的,但是不同的瀏覽器效果不一樣,F(xiàn)F中嚴(yán)格按上述說明執(zhí)行,但是在IE6/7中,這個(gè)屬性返回該DOM對(duì)象在其直接父對(duì)象中的位置,但是IE8改正了這個(gè)問題,不過IE8又有了一個(gè)新問題,其他的瀏覽器都是從父對(duì)象的內(nèi)容區(qū)域的左上角開始定位,IE8確是從父元素的border的左上角開始定位,由于測試環(huán)境為IETester中的IE8,不能排除是IETester的問題。
clientX:鼠標(biāo)在頁面顯示區(qū)域的坐標(biāo)。
注:以上兩個(gè)都是各瀏覽器通用的。
pageX:FF特有,鼠標(biāo)在頁面上的位置,從頁面左上角開始定位,這個(gè)可以很方便在整個(gè)頁面上進(jìn)行定位,IE沒有直接替換的屬性。
layerX:FF特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素的層級(jí)關(guān)系中離該元素最近的,設(shè)置了position的父元素”的邊界的位置,從border的左上角開始定位,即如果這個(gè)父元素存在border,則坐標(biāo)原點(diǎn)在border的左上角,而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素”的位置,從內(nèi)容區(qū)域左上角開始定位,不是從border左上角開始!這個(gè)屬性比較好用,用來判斷鼠標(biāo)點(diǎn)在一個(gè)元素中的哪個(gè)位置很方便,F(xiàn)F沒有直接替換的屬性。
x:IE特有,跟layerX一個(gè)效果,可作為layerX的直接替換屬性。
注:IE和FF的定位有個(gè)1px的差別,實(shí)際上,IE的定位從0開始,F(xiàn)F的定位從1開始,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ì)象”中的位置,雖然話是這么說的,但是不同的瀏覽器效果不一樣,F(xiàn)F中嚴(yán)格按上述說明執(zhí)行,但是在IE6/7中,這個(gè)屬性返回該DOM對(duì)象在其直接父對(duì)象中的位置,但是IE8改正了這個(gè)問題,不過IE8又有了一個(gè)新問題,其他的瀏覽器都是從父對(duì)象的內(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ù)剬?duì)offsetleft兼容性的理解
- window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別
- 簡單談?wù)刼ffsetleft、offsetTop和offsetParent
相關(guān)文章
js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除)
本篇文章主要介紹了js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除) 需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12javascript實(shí)現(xiàn)網(wǎng)頁端解壓并查看zip文件
昨天給大家分享了在網(wǎng)頁端使用zip.js插件實(shí)現(xiàn)在線壓縮文件的代碼,今天給大家分享一下javascript實(shí)現(xiàn)網(wǎng)頁端解壓并查看zip文件的方法,非常的實(shí)用,有需要的小伙伴可以參考下2015-12-12關(guān)于webpack2和模塊打包的新手指南(小結(jié))
本篇文章主要介紹了關(guān)于webpack2和模塊打包的新手指南(小結(jié)),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-08-08Javascript 完美運(yùn)動(dòng)框架(逐行分析代碼,讓你輕松了運(yùn)動(dòng)的原理)
這篇文章主要介紹了Javascript 完美運(yùn)動(dòng)框架,逐行分析代碼,讓你輕松了運(yùn)動(dòng)的原理,需要的朋友可以參考下2015-01-01onkeydown事件解決按回車鍵直接提交數(shù)據(jù)的需求
登陸頁面需要撲捉用戶按下回車自動(dòng)提交的需求,于是相到在body里添加onkeydown事件跳javascript在提交表單,具體看下實(shí)現(xiàn)代碼,希望對(duì)你有所幫助2013-04-04three.js鏡頭追蹤的移動(dòng)效果實(shí)例
這篇文章主要為大家介紹了three.js鏡頭追蹤的移動(dòng)效果實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08