快捷導(dǎo)航

基于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 };
        }

您可能感興趣的文章: