JS獲取滑鼠指標的位置（坐標）

本範例講解 JavaScript 獲取指標的頁面位置和相對位置。

獲取指標的頁面位置

使用事件物件的 pageX 和 pageY（相容 Safari），或者 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>

演示效果如下：