站長資訊網(wǎng)
javascript獲取指針的位置的方法：使用事件對象的pageX和pageY，或者clientX和clientY屬性，并且配合scrollLeft和scrollTop屬性，這樣就可以計算出指針的位置了。
本文操作環(huán)境：windows10系統(tǒng)、javascript 1.8.5、thinkpad t480電腦。
要想獲取指針在頁面中的位置，可以使用事件對象的pageX和pageY，或者是 clientX 和 clientY（兼容 IE）屬性，同時還需要配合 scrollLeft 和 scrollTop 屬性，這樣就可以計算出鼠標(biāo)指針在頁面中的位置了。
//獲取鼠標(biāo)指針的頁面位置 //參數(shù)：e表示當(dāng)前事件對象 //返回值：返回鼠標(biāo)相對頁面的坐標(biāo)，對象格式（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 元素代表頁面區(qū)域，而 html 元素被隱藏，但是標(biāo)準(zhǔn)模式以 html 元素代表頁面區(qū)域，而 body 元素僅是一個獨立的頁面元素，所以需要兼容這兩種解析方式。
下面示例演示了如何調(diào)用上面擴展函數(shù) getMP() 捕獲當(dāng)前鼠標(biāo)指針在文檔中的位置。
<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 可以獲取鼠標(biāo)指針相對定位包含框的偏移位置。如果使用 offsetLeft 和 offsetTop 屬性獲取元素在定位包含框中的偏移坐標(biāo)，然后使用 layerx 屬性值減去 offsetLeft 屬性值，使用 layery 屬性值減去 offsetTop 屬性值，即可得到鼠標(biāo)指針在元素內(nèi)部的位置。
//獲取鼠標(biāo)指針在元素內(nèi)的位置 //參數(shù)：e表示當(dāng)前事件對象，o表示當(dāng)前元素 //返回值：返回相對坐標(biā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) } }
在實踐中上面函數(shù)存在以下兩個問題：
-
Mozilla 類型和 Safari 瀏覽器以元素邊框外壁的左上角為參照點。
-
其他瀏覽器則是以元素邊框內(nèi)壁的左上角為坐標(biāo)原點。
考慮到邊框?qū)κ髽?biāo)位置的影響，當(dāng)元素邊框很寬時，必須考慮如何消除邊框?qū)τ谑髽?biāo)位置的影響。但是，由于邊框樣式不同，它存在 3 像素的默認(rèn)寬度，為獲取元素的邊框?qū)嶋H寬度帶來了麻煩。需要設(shè)置
