javascript 獲取鼠標(光標)的座標位置 兼容IE/Firefox等瀏覽器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>獲取鼠標座標</title>
</head>
<body>
<script type="text/javascript">
//用 javascript 獲取當頁面上鼠標（光標）位置在許多情況下都會用到，比如拖放，懸停提示（tooltip） 等等。當然，這裏我們依然要面對瀏覽器的兼容問題，在不同的瀏覽器下，對這些相關的屬性處理方式也不同，本文詳細介紹了瀏覽器在處理這些屬性時的差異和最終的解決方法
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,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//由於這個需求我們經常用到，所以我們將這段代碼獨立成一篇文章，供新手查詢。
使用方式：
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>
說明：
我們首先要聲明一個 evnet 對象，無論移動、點擊、按鍵等，都會激活一個 evnet ，在 Internet Explorer 裏， event 是全局變量，會被存儲在 window.event 裏． 在 firefox 或者其他瀏覽器，event 會被相應的函數獲取．當我們將mouseMove函數賦值於document.onmousemove，mouseMove 會獲取鼠標移動事件。
爲了讓 ev 在所有瀏覽器下獲取了 event 事件，在Firefox下"||window.event"將不起作用，因爲ev已經有了賦值。在 MSIE 中 ev 爲空，所以得到 window.event 。
因爲在這篇文章中我們需要多次獲取鼠標位置，所以我們設計了一個 mousePosition 函數，它包含一個參數 ： event 。
因爲我們要在 MSIE 和其他瀏覽器下運行，Firefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示鼠標相對於文檔的位置，如果你有一個 500*500 的窗口並且你的鼠標在絕對中間，那麼 pageX 和 pageY 的值都是 250，如果你向下滾動 500， 那麼 pageY 將變成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠標相當於窗口的位置，而不是文檔。在同樣的例子中，如果你向下滾動500，clientY 依然是 250，因此，我們需要添加 scrollLeft 和 scrollTop 這兩個相對於文檔的屬性。最後，MSIE 中文檔並不是從 0，0 開始，而是通常有一個小的邊框（通常是 2 象素），邊框的大小定義在 document.body.clientLeft 和 clientTop 中，我們也把這些加進去。
很幸運，我們現在已經用 mousePosition 函數解決了座標問題，不需爲此費心了。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.