JS取得滑鼠位置的方法：1、使用clientX和clientY屬性；2、使用offsetX和offsetY屬性；3、使用pageX和pageY屬性；4、使用screenX和screenY屬性；5、使用layerX和layerY屬性。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
在 JavaScript中，當事件發生時，取得滑鼠的位置是件很重要的事件。由於瀏覽器的不相容性，不同瀏覽器分別在各自事件物件中定義了不同的屬性，說明如下表所示。這些屬性都是以像素值定義了滑鼠指標的座標，但由於它們參考的座標係不同，導致精確計算滑鼠的位置比較麻煩。
屬性及其相容性
| 屬性 |
#說明 |
相容性 |
| clientX |
以瀏覽器視窗左上頂角為原點，定位x 軸座標 |
所有瀏覽器，不相容Safari |
| clientY |
以瀏覽器視窗左上方角為原點，定位y 軸座標 |
所有瀏覽器，不相容於Safari |
| offsetX |
以目前事件的目標物件左上頂角為原點，定位x 軸座標 |
所有瀏覽器，不相容Mozilla |
| offsetY | #以目前事件的目標物件左上頂角為原點，定位y 軸座標 |
所有瀏覽器，不相容於Mozilla |
| pageX |
#以document 物件（即文件視窗）左上頂角為原點，定位x 軸座標 |
#所有瀏覽器，不相容於IE |
##pageY | #以document 物件（即文件視窗）左上頂角為原點，定位y 軸座標 | #所有瀏覽器，不相容於IE |
##screenX
| 電腦螢幕左上頂角為原點，定位x 軸座標 |
所有瀏覽器 |
|
#screenY##電腦螢幕左上方角為原點，定位y 軸座標 | 所有瀏覽器 |
| layerX
最近的絕對定位的父元素（如果沒有，則為document 物件）左上頂角為元素，定位x 軸座標 | Mozilla 和Safari |
| #layerY
最近的絕對定位的父元素（如果沒有，則為document物件）左上頂角為元素，定位y 軸座標 | Mozilla 和Safari |
|
範例1
以下介紹如何搭配使用多種滑鼠座標屬性，以實作相容不同瀏覽器的滑鼠定位設計方案。
首先，來看看 screenX 和 screenY 屬性。這兩個屬性獲得了所有瀏覽器的支持，應該說是最優選用屬性，但是它們的坐標系時計算機屏幕，也就是說，以計算機屏幕左上角為定位原點。這對於以瀏覽器視窗為活動空間的網頁來說沒有任何價值。因為不同的螢幕分辨率，不同的瀏覽器視窗大小和位置，都使得在網頁中定位滑鼠成為一件很困難的事情。
其次，如果以 document 物件為座標系，則可以考慮選用 pageX 和 pageY 屬性實作在瀏覽器視窗中進行定位。這對於設計滑鼠跟隨來說是一個好主意，因為跟隨元素一般都以絕對定位的方式在瀏覽器視窗中移動，在mousemove 事件處理函數中把pageX 和pageY 屬性值傳遞給跟絕對定位元素的top 和left樣式屬性即可。
IE 事件模型不支援上面的屬性，為此還需尋求相容 IE 的方法。而看 clientX 和 clientY 屬性是以 window 物件為座標系，且 IE 事件模型支援它們，可以選用它們。不過考慮 window 等物件可能出現的捲軸偏移量，所以還應加上相對於 window 物件的頁面滾動的偏移量。
var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}登入後複製
var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}登入後複製
#在上面程式碼中，先偵測pageX 和pageY 屬性是否存在，如果存在則取得它們的值；如果不存在，則偵測並取得clientX 和clientY 屬性值，然後加上document.documentElement 和document.body 物件的scrollLeft 和scrollTop 屬性值，這樣在不同瀏覽器中就獲得了相同的座標值。
範例2
封裝滑鼠定位程式碼。設計想法：能夠根據傳遞的具體對象，以及相對滑鼠指針的偏移量，命令該對象能夠跟隨水保移動。
先定義一個封裝函數，設計函數傳入參數為物件參考指標、相對滑鼠指標的偏移距離，以及事件物件。然後封裝函數能夠根據事件物件取得滑鼠的座標值，並設定該物件為絕對定位，絕對定位的值為滑鼠指標目前的座標值。
封裝程式碼如下：
var pos = function (o, x, y, event) { //鼠标定位赋值函数
var posX = 0, posY = 0; //临时变量值
var e = event || window.event; //标准化事件对象
if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
o.style.position = "absolute"; //定义当前对象为绝对定位
o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}登入後複製
var pos = function (o, x, y, event) { //鼠标定位赋值函数
var posX = 0, posY = 0; //临时变量值
var e = event || window.event; //标准化事件对象
if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
o.style.position = "absolute"; //定义当前对象为绝对定位
o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}登入後複製
下面測試封裝程式碼。為 document 物件註冊滑鼠移動事件處理函數，並傳入滑鼠定位封裝函數，傳入的物件為
元素，設定其位置向滑鼠指標右下方偏移（10,20）的距離。考慮到 DOM 事件模型透過參數形式傳遞事件對象，所以不要忘記在呼叫函數中也要傳遞事件對象。
<div id="div1">鼠标追随</div>
<script>
var div1 = document.getElementById("div1");
document.onmousemove = function (event) {
pos (div1, 10, 20, event);
}
</script>登入後複製
<div id="div1">鼠标追随</div>
<script>
var div1 = document.getElementById("div1");
document.onmousemove = function (event) {
pos (div1, 10, 20, event);
}
</script>登入後複製
#範例3
取得滑鼠指標在元素內的座標。使用 offsetX 和 offsetY 屬性可以實現這樣的目標，但是 Mozilla 瀏覽器不支援。可以選用 layerX 和 layerY 屬性來相容 Mozilla 瀏覽器。
設計程式碼如下：
var event = event || window.event;
if (event.offsetX || event.offsetY) { //适用非Mozilla浏览器
x = event.offsetX;
y = event.offsetY;
} else if (event.layerX || event.layerY) { //兼容Mozilla浏览器
x = event.layerX;
y = event.layerY;
}登入後複製
var event = event || window.event;
if (event.offsetX || event.offsetY) { //适用非Mozilla浏览器
x = event.offsetX;
y = event.offsetY;
} else if (event.layerX || event.layerY) { //兼容Mozilla浏览器
x = event.layerX;
y = event.layerY;
}登入後複製
但是，layerX 和layerY 屬性是以絕對定位的父元素為參照物，而不是元素本身。如果沒有絕對定位的父元素，則會以 document 物件為參照物。為此，可以透過腳本動態添加或手動添加的方式，設計在元素的外層包圍一個絕對定位的父元素，這樣可以解決瀏覽器相容問題。考慮元素之間的距離所造成的誤差，可以適當地減去 1 個或幾個像素的偏移量。
完整設計程式碼如下：
<input type="text" id="text" />
<span style="position:absolute;">
<div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
var t = document.getElementById("text");
var div1 = document.getElementById("div1");
div1.onmousemove = function (event) {
var event = event || window.event; //标准化事件对象
if (event.offsetX || event.offsetY) {
t.value = event.offsetX + "" + event.offsetY;
} else if (event.layerX || event.layerY) {
t.value = (event.layerX-1) + "" + (event.layerY-1);
}
}
</script>登入後複製
<input type="text" id="text" />
<span style="position:absolute;">
<div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
var t = document.getElementById("text");
var div1 = document.getElementById("div1");
div1.onmousemove = function (event) {
var event = event || window.event; //标准化事件对象
if (event.offsetX || event.offsetY) {
t.value = event.offsetX + "" + event.offsetY;
} else if (event.layerX || event.layerY) {
t.value = (event.layerX-1) + "" + (event.layerY-1);
}
}
</script>登入後複製
這種做法能夠解決在元素內部定位滑鼠指標的問題。但是，由於在元素外包裹了一個絕對定位的元素，因此會破壞整個頁面的結構佈局。在確保這種人為方式不會導致結構佈局混亂的前提下，可以考慮選用這種方法。
【推薦學習：javascript高階教學】
#
以上是javascript怎麼取得滑鼠位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
