溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何用javascript獲取指針的位置”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
javascript獲取指針的位置的方法：使用事件對象的pageX和pageY，或者clientX和clientY屬性，并且配合scrollLeft和scrollTop屬性，這樣就可以計算出指針的位置了。
本文操作環境：windows10系統、javascript 1.8.5、thinkpad t480電腦。
要想獲取指針在頁面中的位置，可以使用事件對象的pageX和pageY，或者是 clientX 和 clientY（兼容 IE）屬性，同時還需要配合 scrollLeft 和 scrollTop 屬性，這樣就可以計算出鼠標指針在頁面中的位置了。
//獲取鼠標指針的頁面位置
//參數：e表示當前事件對象
//返回值：返回鼠標相對頁面的坐標，對象格式（x，y）
function getMP (e) {
var e = e || window.event;
return {
x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft),
y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
}
}pageX 和 pageY 事件屬性不被 IE 瀏覽器支持，而 clientX 和 clientY 事件屬性又不被 Safari 瀏覽器支持，因此可以混合使用它們以兼容不同瀏覽器。對于怪異模式來說，body 元素代表頁面區域，而 html 元素被隱藏，但是標準模式以 html 元素代表頁面區域，而 body 元素僅是一個獨立的頁面元素，所以需要兼容這兩種解析方式。
下面示例演示了如何調用上面擴展函數 getMP() 捕獲當前鼠標指針在文檔中的位置。
<body style="width:2000px;height:2000px;">
<textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea>
</body>
<script>
var t = document.getElementById("t");
document.onmousemove = function(e){
var m = getMP(e);
t.value ="mouseX = " + m.x + "\n" + "mouseY = " + m.y
}
</script>演示效果如下：
獲取指針的相對位置
使用 offsetX 和 offsetY 或者 layerX 和 layerY 可以獲取鼠標指針相對定位包含框的偏移位置。如果使用 offsetLeft 和 offsetTop 屬性獲取元素在定位包含框中的偏移坐標，然后使用 layerx 屬性值減去 offsetLeft 屬性值，使用 layery 屬性值減去 offsetTop 屬性值，即可得到鼠標指針在元素內部的位置。
//獲取鼠標指針在元素內的位置
//參數：e表示當前事件對象，o表示當前元素
//返回值：返回相對坐標對象
function getME (e, o) {
var e = e || window.event;
return {
x : e.offsetX || (e.layerX - o.offsetLeft),
y : e.offsetY || (e.layerY - o.offsetTop)
}
}在實踐中上面函數存在以下兩個問題：
Mozilla 類型和 Safari 瀏覽器以元素邊框外壁的左上角為參照點。
其他瀏覽器則是以元素邊框內壁的左上角為坐標原點。
考慮到邊框對鼠標位置的影響，當元素邊框很寬時，必須考慮如何消除邊框對于鼠標位置的影響。但是，由于邊框樣式不同，它存在 3 像素的默認寬度，為獲取元素的邊框實際寬度帶來了麻煩。需要設置更多的條件，來判斷當前元素的邊框寬度。
示例
完善后的獲取鼠標指針在元素內的位置擴展函數如下：
//完善獲取鼠標指針在元素內的位置
//參數：e表示當前事件對象，o表示當前元素
//返回值：返回鼠標相對元素的坐標位置，其中x表示x軸偏移距離，y表示y軸偏移距離
function getME(e, o){
var e = e || window.event;
//獲取元素左側邊框的寬度
//調用getStyle()擴展函數獲取邊框樣式值，并嘗試轉換為數值，如果轉換成功，則賦值。
//否則判斷是否定義了邊框樣式，如果定義邊框樣式，且值不為none，則說明邊框寬度為默認值，即為3像素。
//如果沒有定義邊框樣式，且寬度值為auto，則說明邊框寬度為0
var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none" )? 3 : 0);
//獲取元素頂部邊框的寬度，設計思路與獲取左側邊框方法相同
var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle !="none" ) ? 3 : 0);
var x = e.offsetX || (e.layerX - o.offsetLeft - bl); // 一般瀏覽器下鼠標偏移值
//兼容Mozilla類型瀏覽器，減去邊框寬度
var y = e.offsetY || (e.layerY - o.offsetTop - bt); // 一般瀏覽器下鼠標偏移值
//兼容Mozilla類型瀏覽器，減去邊框寬度
var u = navigator.userAgent; // 獲取瀏覽器的用戶數據
if( (u.indexOf("KHTML") > - 1) ||(u.indexOf("Konqueror") > - 1) || (u.indexOf("AppleWebKit") > - 1)
){ // 如果是Safari瀏覽器，則減去邊框的影響
x -= bl; y -= bt;
} return { // 返回兼容不同瀏覽器的鼠標位置對象，以元素邊框內壁左上角為定位原點
x : x, y : y
}
}演示效果如下：
“如何用javascript獲取指針的位置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
