[jQuery]取得滑鼠座標

jQuery解決了跨瀏覽器的問題，以往firefox跟ie取得座標的語法是截然不同的，現在只需要先引用jquery的js然後就可以使用以下程式碼來取得滑鼠的座標位置。

jQuery(document).mousemove(function(event) {
mx=event.pageX;
my=event.pageY;

alert('x='+mx+',y='+my);
});

//下列為判斷是否有pageX 與 pageY 的function

function mouseCoords(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
};
}
解釋：
Html中定位是非常重要的，否則再好的東西不能在它應該在的地方。
clientX, clientY是鼠標當前相對於網頁的位置，當鼠標位於頁面左上角時clientX=0, clientY=0；
offsetX, offsetY是鼠標當前相對於網頁中的某一區域的位置，當鼠標位於頁面中這一區域的左上角時offsetX=0, offsetY=0；
screenX, screenY是相對於用戶顯示器的位置
x,y是鼠標相對於當前瀏覽器的位置

解釋2:
* x:設置或者是得到鼠標相對於目標事件的父元素的外邊界在x坐標上的位置。
* clientX:相對於客戶區域的x坐標位置，不包括滾動條，就是正文區域。
* offsetx：設置或者是得到鼠標相對於目標事件的父元素的內邊界在x坐標上的位置。
* screenX:相對於用戶屏幕。



同時你可以對比下面代碼分析
<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
<tr><td>
<div onclick="show()" style="background:silver;cursor:hand">
Click here to show.
</div>
</td></tr>
</table>
<script>
function show(){
alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY);
}
</script>

範例實做