基于JavaScript實(shí)現(xiàn) 獲取鼠標(biāo)點(diǎn)擊位置坐標(biāo)的方法
更新時(shí)間：2013年04月12日 11:10:50 作者：
本篇文章，小編將為大家介紹基于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)的還算一致。
復(fù)制代碼 代碼如下:
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ě)出了這樣的代碼
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
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高級(jí)程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記8 js函數(shù)（中）
接著看函數(shù)——這個(gè)具有魔幻色彩的對(duì)象。在上篇文章中說(shuō)函數(shù)內(nèi)部屬性時(shí)，還遺留了一個(gè)this內(nèi)部屬性沒(méi)有解釋，不過(guò)在說(shuō)this之前，我想先說(shuō)一說(shuō)執(zhí)行環(huán)境和作用域的概念2012-10-10
Javascript基礎(chǔ)教程之關(guān)鍵字和保留字匯總
這篇文章主要介紹了Javascript基礎(chǔ)教程之關(guān)鍵字和保留字匯總,需要的朋友可以參考下2015-01-01
Three.js源碼閱讀筆記(基礎(chǔ)的核心Core對(duì)象)
Three.js是一個(gè)比較偉大的webgl開(kāi)源庫(kù)，它簡(jiǎn)化了瀏覽器3D編程，使得使用JavaScript在瀏覽器中創(chuàng)建復(fù)雜的場(chǎng)景變得容易很多接下來(lái)先從最基礎(chǔ)的核心（Core）對(duì)象開(kāi)始,感興趣的朋友可以參考下2012-12-12
你為學(xué)習(xí)JavaScript 制定的藍(lán)圖、路線、行動(dòng)計(jì)劃!你不必?fù)?dān)心找不到最好的資源，先整理些不好的資源，再確定下一步該學(xué)什么。遵循它，一步一步來(lái)2011-10-10
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-02
JavaScript模版引擎的基本實(shí)現(xiàn)方法淺析
這篇文章主要介紹了JavaScript模版引擎的基本實(shí)現(xiàn)方法,講解利用function對(duì)象來(lái)一步步編寫(xiě)簡(jiǎn)單的模板,需要的朋友可以參考下
2016-02-02 
JavaScript lastIndexOf方法入門實(shí)例（計(jì)算指定字符在字符串中最后一次出現(xiàn)的位置）
這篇文章主要介紹了JavaScript字符串對(duì)象的lastIndexOf方法入門實(shí)例,lastIndexOf方法用于計(jì)算指定字符在字符串中最后一次出現(xiàn)的位置,需要的朋友可以參考下
2014-10-10 
這篇文章主要介紹了將RGB值轉(zhuǎn)換為灰度值的簡(jiǎn)單算法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10 
JS的框架Polymer中的dom-if和is屬性使用說(shuō)明
這篇文章主要介紹了JS的框架Polymer中的dom-if和is屬性使用說(shuō)明,Polymer是Google開(kāi)發(fā)的一款JavaScript框架,需要的朋友可以參考下
2015-07-07