基于JavaScript實(shí)現(xiàn) 獲取鼠標(biāo)點(diǎn)擊位置坐標(biāo)的方法
在一些DOM操作中我們經(jīng)常會(huì)跟元素的位置打交道,鼠標(biāo)交互式一個(gè)經(jīng)常用到的方面,令人失望的是不同的瀏覽器下會(huì)有不同的結(jié)果甚至是有的瀏覽器下沒(méi)結(jié)果,這篇文章就上鼠標(biāo)點(diǎn)擊位置坐標(biāo)獲取做一些簡(jiǎn)單的總結(jié),沒(méi)特殊聲明代碼在IE8,F(xiàn)ireFox,Chrome下進(jìn)行測(cè)試兼容
鼠標(biāo)點(diǎn)擊位置坐標(biāo)
相對(duì)于屏幕
如果是涉及到鼠標(biāo)點(diǎn)擊確定位置相對(duì)比較簡(jiǎn)單,獲取到鼠標(biāo)點(diǎn)擊事件后,事件screenX,screenY獲取的是點(diǎn)擊位置相對(duì)于屏幕的左邊距與上邊距,不考慮iframe因素,不同瀏覽器下表現(xiàn)的還算一致。
function getMousePos(event) {
var e = event || window.event;
return {'x':e.screenX,'y':screenY}
}
相對(duì)瀏覽器窗口
簡(jiǎn)單代碼即可實(shí)現(xiàn),然而這是還不夠,因?yàn)榻^大多數(shù)情況下我們希望獲取鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器窗口的坐標(biāo),event的clientX,clientY屬性分別表示鼠標(biāo)點(diǎn)擊位置相對(duì)于文檔的左邊距,上邊距。于是類似的我們寫(xiě)出了這樣的代碼
function getMousePos(event) {
var e = event || window.event;
return {'x':e.clientX,'y':clientY}
}
相對(duì)文檔
簡(jiǎn)單測(cè)試也沒(méi)什么問(wèn)題,但是clientX與clientY獲取的是相對(duì)于當(dāng)前屏幕的坐標(biāo),忽略頁(yè)面滾動(dòng)因素,這在很多條件下很有用,但當(dāng)我們需要考慮頁(yè)面滾動(dòng),也就是相對(duì)于文檔(body元素)的坐標(biāo)時(shí)怎么辦呢?加上滾動(dòng)的位移就可以了,下邊我們?cè)囋囋趺从?jì)算頁(yè)面滾動(dòng)的位移。
其實(shí)在Firefox下問(wèn)題會(huì)簡(jiǎn)單很多,因?yàn)镕irefox支持屬性pageX,與pageY屬性,這兩個(gè)屬性已經(jīng)把頁(yè)面滾動(dòng)計(jì)算在內(nèi)了。
在Chrome可以通過(guò)document.body.scrollLeft,document.body.scrollTop計(jì)算出頁(yè)面滾動(dòng)位移,而在IE下可以通過(guò)document.documentElement.scrollLeft ,document.documentElement.scrollTop
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
}
- openlayers實(shí)現(xiàn)地圖彈窗
- openlayers實(shí)現(xiàn)地圖測(cè)距測(cè)面
- vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果
- javascript 鼠標(biāo)拖動(dòng)圖標(biāo)技術(shù)
- JavaScript獲取對(duì)象在頁(yè)面中位置坐標(biāo)的方法
- javascript實(shí)時(shí)獲取鼠標(biāo)坐標(biāo)值并顯示的方法
- javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)的方法
- JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- JavaScript獲取鼠標(biāo)坐標(biāo)的函數(shù)(兼容IE、FireFox、Chrome)
- openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo)
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)和算法之二叉樹(shù)詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)和算法之二叉樹(shù)詳解,本文講解了二叉樹(shù)的概念、二叉樹(shù)的特點(diǎn)、二叉樹(shù)節(jié)點(diǎn)的定義、查找最大和最小值等內(nèi)容,需要的朋友可以參考下2015-02-02js中的setInterval和setTimeout使用實(shí)例
這篇文章主要介紹了javascript中的兩個(gè)定時(shí)執(zhí)行函數(shù)setInterval和setTimeout的用法,需要的朋友可以參考下2014-05-05使用HTML+CSS+JS制作簡(jiǎn)單的網(wǎng)頁(yè)菜單界面
這篇文章主要介紹了使用HTML+CSS+JS制作簡(jiǎn)單的網(wǎng)頁(yè)菜單界面,這個(gè)ABROAD項(xiàng)目所使用的JavaScript部分代碼非常簡(jiǎn)單,需要的朋友可以參考下2015-07-07Array.slice()與Array.splice()的返回值類型
Array.slice()與Array.splice()的返回值類型...2006-10-10JavaScript中的Navigator瀏覽器對(duì)象
2008-01-01javascript 中__proto__和prototype詳解
本文詳細(xì)介紹了javascript的內(nèi)部原型__proto__和構(gòu)造器原型prototype,以及他們之間的異同,十分的詳盡,有需要的小伙伴快來(lái)研究下吧。2014-11-11Javascript操作dom對(duì)象之select全面解析
下面小編就為大家?guī)?lái)一篇Javascript操作dom對(duì)象之select全面解析。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04