鼠標事件發生時的位置信息小記

　　鼠標事件發生時，相關的位置信息會保存在事件對象中（event）。在開發中，有時候須要用到跟滾輪和鼠標有關的位置屬性，因此記錄一下，以供以後再用。

　　　　1.客戶區座標位置

　　鼠標事件都是在瀏覽器視口中特定位置發生的，位置信息保存在事件對象的cilentX,clientY屬性中。全部瀏覽器都支持這個屬性，它們的值表示事件發生時鼠標指針在視口中的水平和垂直座標。簡單說來就是，鼠標相對於視口的位置。示例代碼以下：

　　　　

　　　　　　　　　　　　　　　　圖1  clientX,clientY用法示例

　　　　　　　注：本示例只是爲了演示具體屬性，沒有考慮兼容性

　　　　2.頁面座標位置

　　頁面座標經過事件的pageX,pageY屬性，告訴你事件在頁面的什麼位置發生的。這兩個屬性表示鼠標光標在頁面的位置，座標是從頁面自己而不是視口的 左邊和頂邊計算的。頁面沒有滾動的狀況下，pageX,pageY 和clientX,clientY的值相等。IE8及更高版本不支持這個屬性，可根據client座標位置和滾動信息計算出來

。計算過程以下：

　　

　　　　　　　　圖2  計算髮生的事件在頁面中的位置

 

　　3.屏幕座標位置

　　　　相對與整個電腦屏幕的位置。而經過screenX,screenY屬性能夠肯定鼠標事件發生時鼠標指針相對與電腦屏幕的位置。示例以下：

　　

　　　　　　　　　　圖3 screenX,screenY 用法示例

　　　　　　注：本示例只是爲了演示具體屬性，沒有考慮兼容性