JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié)
javascript并沒(méi)有mouse對(duì)象,獲取鼠標(biāo)坐標(biāo)要靠強(qiáng)大的event對(duì)象。
我們通過(guò)監(jiān)聽(tīng)document的mousemove,就可以實(shí)時(shí)獲得鼠標(biāo)位置。
但是??!event中和鼠標(biāo)相關(guān)的屬性太多了,很讓人頭大!如下:
event.layerX | event.layerY |
event.clientX | event.clientY |
event.pageX | event.pageY |
event.offsetX | event.offsetY |
event.screenX | event.screenY |
event.x | event.y |
共計(jì)6組!
而且他們的區(qū)別并不明顯,各瀏覽器間還不兼容!
這篇文章的目的就是搞清楚他們的區(qū)別,以及選出那些不推薦使用的。
測(cè)試代碼
直接運(yùn)行下列代碼:
測(cè)試過(guò)程中發(fā)現(xiàn)一個(gè)神器:chrome(谷歌瀏覽器)和IE9全兼容以上所有屬性!用來(lái)比較他們就非常方便了。
經(jīng)過(guò)對(duì)比,結(jié)果如下:
各屬性釋義
clientX與Y,是鼠標(biāo)相對(duì)于瀏覽器視口(即滾動(dòng)條之外的部分忽略掉)的坐標(biāo);所有瀏覽器都支持。
screenX與Y,是鼠標(biāo)相對(duì)于整個(gè)屏幕左邊(頂邊)的坐標(biāo),基本與document脫節(jié)了;全兼容。
offsetX與Y,是鼠標(biāo)相對(duì)于當(dāng)前所指向?qū)ο蟮淖鴺?biāo),鼠標(biāo)此時(shí)指向按鈕,則offsetX是相對(duì)于這個(gè)按鈕;firefox不支持
x與y,同標(biāo)準(zhǔn)瀏覽器的layerX與Y,是IE中可以用來(lái)代替layerX的屬性
pageX與Y,是鼠標(biāo)相對(duì)于整個(gè)頁(yè)面左邊(頂邊)的坐標(biāo),包括視口之外的;IE7,8不支持。
重點(diǎn):layerX與layerY
layerX與Y是標(biāo)準(zhǔn)瀏覽器出的新屬性,IE9也支持。他可以用來(lái)代替offsetX與Y.但是,他的定義為:相對(duì)于當(dāng)前指向元素最近的有定位信息的元素的坐標(biāo)。這個(gè)“有定位”是指有非默認(rèn)定位的css屬性(即非static)。
如果,當(dāng)前指向的元素就有定位,那么layerX與Y就返回相對(duì)于此元素的坐標(biāo);否則,就查看此元素的父標(biāo)簽;還是沒(méi)有定位的話,就繼續(xù);一直到根元素——html節(jié)點(diǎn)。
所以,在firefox中,想要offsetX值,就必須加入position定位信息!
兼容性總結(jié):
1,firefox不支持offsetX,offsetY與x,y屬性,但完全可以用layerX代替他們;
2,ie中的x,y相當(dāng)于firefox&chrome中的layerX與layerY;
3,ie7,8的document的邊界與瀏覽器窗口的邊界有2px的距離,所以在窗口最大化時(shí)screenX最小都有2px;
4,ie9中的layerX與Y,雖然有值,但卻莫名其妙的不正確,貌似與html標(biāo)簽有關(guān),比如我的例子的代碼,把滾動(dòng)條拖到最右邊,鼠標(biāo)從空白慢慢移動(dòng)到大DIV上,此時(shí)大DIV的最右邊與第一個(gè)DIV的最右邊的差值也會(huì)算進(jìn)layerX中。。。后頭元素越來(lái)越多,這個(gè)計(jì)算就越復(fù)雜;而firefox與chrome的layerX則沒(méi)有這個(gè)問(wèn)題。所以,不要在IE9中使用layerX.
5,在chrome中,x與y雖然有值,但是是和clientX與Y完全相同! 所以,不建議使用x,y屬性。
兼容性補(bǔ)救
標(biāo)準(zhǔn)瀏覽器中可以用position與event.layerX配合來(lái)實(shí)現(xiàn)event.offsetX屬性;
IE7,8中沒(méi)有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX來(lái)求出。
所以,IE中的x,y或者offsetX,offsetY可以去掉一個(gè)了。
相關(guān)文章
JS實(shí)現(xiàn)獲取圖片大小和預(yù)覽的方法完整實(shí)例【兼容IE和其它瀏覽器】
這篇文章主要介紹了JS實(shí)現(xiàn)獲取圖片大小和預(yù)覽的方法,結(jié)合完整實(shí)例形式分析了javascript針對(duì)不同瀏覽器處理圖片上傳與預(yù)覽等操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04js中的document.querySelector()方法舉例詳解
這篇文章主要給大家介紹了關(guān)于js中document.querySelector()方法的相關(guān)資料,document.querySelector是JavaScript中的一個(gè)內(nèi)置方法,用于通過(guò)CSS選擇器選擇文檔中的第一個(gè)匹配元素,需要的朋友可以參考下2024-01-01JavaScript Html實(shí)現(xiàn)移動(dòng)端紅包雨功能頁(yè)面
這篇文章主要為大家詳細(xì)介紹了JavaScript Html實(shí)現(xiàn)移動(dòng)端紅包雨功能頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01微信小程序—setTimeOut定時(shí)器的問(wèn)題及解決
這篇文章主要介紹了微信小程序—setTimeOut定時(shí)器的問(wèn)題及解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07詳解如何通過(guò)JavaScript實(shí)現(xiàn)函數(shù)重載
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)JavaScript實(shí)現(xiàn)函數(shù)重載,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript有一定的幫助,感興趣的可以了解一下2023-01-01js點(diǎn)擊圖片實(shí)現(xiàn)查看大圖簡(jiǎn)單方法
今天開(kāi)發(fā)的時(shí)候,遇到要點(diǎn)擊縮略圖之后顯示圖片的大圖查看,所以本文給大家分享下,這篇文章主要給大家介紹了關(guān)于js點(diǎn)擊圖片實(shí)現(xiàn)查看大圖的簡(jiǎn)單方法,需要的朋友可以參考下2023-06-06基于rollup的組件庫(kù)打包體積優(yōu)化小結(jié)
這篇文章主要介紹了基于rollup的組件庫(kù)打包體積優(yōu)化小結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06簡(jiǎn)單快速的實(shí)現(xiàn)js計(jì)算器功能
這篇文章主要教大家如何快速簡(jiǎn)單的實(shí)現(xiàn)js計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08