javascript如何獲取鼠標位置

這篇文章主要介紹“javascript如何獲取鼠標位置”，在日常操作中，相信很多人在javascript如何獲取鼠標位置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript如何獲取鼠標位置”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

JS獲取鼠標位置的方法：1、使用clientX和clientY屬性；2、使用offsetX和offsetY屬性；3、使用pageX和pageY屬性；4、使用screenX和screenY屬性；5、使用layerX和layerY屬性。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

在 JavaScript中，當事件發生時，獲取鼠標的位置是件很重要的事件。由于瀏覽器的不兼容性，不同瀏覽器分別在各自事件對象中定義了不同的屬性，說明如下表所示。這些屬性都是以像素值定義了鼠標指針的坐標，但是由于它們參照的坐標系不同，導致精確計算鼠標的位置比較麻煩。

示例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 對象注冊鼠標移動事件處理函數，并傳入鼠標定位封裝函數，傳入的對象為 <div> 元素，設置其位置向鼠標指針右下方偏移（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如何獲取鼠標位置”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！