急救美女视频,超高清美女视频免费

用 javascript 獲取鼠標(biāo)(光標(biāo))的坐標(biāo)位置兼容IE/Firefox等瀏覽器 -...

2010.12.01

用 javascript 獲取當(dāng)頁(yè)面上鼠標(biāo)（光標(biāo)）位置在許多情況下都會(huì)用到，比如拖放，懸停提示（tooltip）等等。當(dāng)然，這里我們依然要面對(duì)瀏覽器的兼容問(wèn)題，在不同的瀏覽器下，對(duì)這些相關(guān)的屬性處理方式也不同，本文詳細(xì)介紹了瀏覽器在處理這些屬性時(shí)的差異和最終的解決方法。

<script type="text/javascript">
// 說(shuō)明：獲取鼠標(biāo)位置
// 整理：http://www.web600.net
// 來(lái)源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.documentElement.scrollTop - document.body.clientTop
};
}
</script>

由于這個(gè)需求我們經(jīng)常用到，所以我們將這段代碼獨(dú)立成一篇文章，供新手查詢。

使用方式：

document.onmousemove = mouseMove;

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mousePosition(ev);

}

我們首先要聲明一個(gè) evnet 對(duì)象，無(wú)論移動(dòng)、點(diǎn)擊、按鍵等，都會(huì)激活一個(gè) evnet ，在 Internet Explorer 里， event 是全局變量，會(huì)被存儲(chǔ)在 window.event 里．在 firefox 或者其他瀏覽器，event 會(huì)被相應(yīng)的函數(shù)獲?。?dāng)我們將mouseMove函數(shù)賦值于document.onmousemove，mouseMove 會(huì)獲取鼠標(biāo)移動(dòng)事件。

為了讓 ev 在所有瀏覽器下獲取了 event 事件，在Firefox下"||window.event"將不起作用，因?yàn)閑v已經(jīng)有了賦值。在 MSIE 中 ev 為空，所以得到 window.event 。

因?yàn)樵谶@篇文章中我們需要多次獲取鼠標(biāo)位置，所以我們?cè)O(shè)計(jì)了一個(gè) mousePosition 函數(shù)，它包含一個(gè)參數(shù) ： event 。

因?yàn)槲覀円?nbsp;MSIE 和其他瀏覽器下運(yùn)行，F(xiàn)irefox 和其他瀏覽器用 event.pageX 和 event.pageY 來(lái)表示鼠標(biāo)相對(duì)于文檔的位置，如果你有一個(gè) 500*500 的窗口并且你的鼠標(biāo)在絕對(duì)中間，那么 pageX 和 pageY 的值都是 250，如果你向下滾動(dòng) 500，那么 pageY 將變成 750。

MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠標(biāo)相當(dāng)于窗口的位置，而不是文檔。在同樣的例子中，如果你向下滾動(dòng)500，clientY 依然是 250，因此，我們需要添加 scrollLeft 和 scrollTop 這兩個(gè)相對(duì)于文檔的屬性。最后，MSIE 中文檔并不是從 0，0 開始，而是通常有一個(gè)小的邊框（通常是 2 象素），邊框的大小定義在 document.body.clientLeft 和 clientTop 中，我們也把這些加進(jìn)去。

很幸運(yùn)，我們現(xiàn)在已經(jīng)用 mousePosition 函數(shù)解決了坐標(biāo)問(wèn)題，不需為此費(fèi)心了。

下面是完整的事例，將其保存為HTML即可運(yùn)行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

function mousePosition(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,