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

創(chuàng)新互聯(lián)建站專注于八公山網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供八公山營(yíng)銷型網(wǎng)站建設(shè)，八公山網(wǎng)站制作、八公山網(wǎng)頁(yè)設(shè)計(jì)、八公山網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造八公山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供八公山網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

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

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

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

屬性及其兼容性

屬性	說明	兼容性
clientX	以瀏覽器窗口左上頂角為原點(diǎn)，定位 x 軸坐標(biāo)	所有瀏覽器，不兼容 Safari
clientY	以瀏覽器窗口左上頂角為原點(diǎn)，定位 y 軸坐標(biāo)	所有瀏覽器，不兼容 Safari
offsetX	以當(dāng)前事件的目標(biāo)對(duì)象左上頂角為原點(diǎn)，定位 x 軸坐標(biāo)	所有瀏覽器，不兼容 Mozilla
offsetY	以當(dāng)前事件的目標(biāo)對(duì)象左上頂角為原點(diǎn)，定位 y 軸坐標(biāo)	所有瀏覽器，不兼容 Mozilla
pageX	以 document 對(duì)象（即文檔窗口）左上頂角為原點(diǎn)，定位 x 軸坐標(biāo)	所有瀏覽器，不兼容 IE
pageY	以 document 對(duì)象（即文檔窗口）左上頂角為原點(diǎn)，定位 y 軸坐標(biāo)	所有瀏覽器，不兼容 IE
screenX	計(jì)算機(jī)屏幕左上頂角為原點(diǎn)，定位 x 軸坐標(biāo)	所有瀏覽器
screenY	計(jì)算機(jī)屏幕左上頂角為原點(diǎn)，定位 y 軸坐標(biāo)	所有瀏覽器
layerX	最近的絕對(duì)定位的父元素（如果沒有，則為 document 對(duì)象）左上頂角為元素，定位 x 軸坐標(biāo)	Mozilla 和 Safari
layerY	最近的絕對(duì)定位的父元素（如果沒有，則為 document 對(duì)象）左上頂角為元素，定位 y 軸坐標(biāo)	Mozilla 和 Safari

示例1

下面介紹如何配合使用多種鼠標(biāo)坐標(biāo)屬性，以實(shí)現(xiàn)兼容不同瀏覽器的鼠標(biāo)定位設(shè)計(jì)方案。

首先，來看看 screenX 和 screenY 屬性。這兩個(gè)屬性獲得了所有瀏覽器的支持，應(yīng)該說是最優(yōu)選用屬性，但是它們的坐標(biāo)系時(shí)計(jì)算機(jī)屏幕，也就是說，以計(jì)算機(jī)屏幕左上角為定位原點(diǎn)。這對(duì)于以瀏覽器窗口為活動(dòng)空間的網(wǎng)頁(yè)來說沒有任何價(jià)值。因?yàn)椴煌钠聊环直媛剩煌臑g覽器窗口大小和位置，都使得在網(wǎng)頁(yè)中定位鼠標(biāo)成為一件很困難的事情。

其次，如果以 document 對(duì)象為坐標(biāo)系，則可以考慮選用 pageX 和 pageY 屬性實(shí)現(xiàn)在瀏覽器窗口中進(jìn)行定位。這對(duì)于設(shè)計(jì)鼠標(biāo)跟隨來說是一個(gè)好主意，因?yàn)楦S元素一般都以絕對(duì)定位的方式在瀏覽器窗口中移動(dòng)，在 mousemove 事件處理函數(shù)中把 pageX 和 pageY 屬性值傳遞給跟絕對(duì)定位元素的 top 和 left樣式屬性即可。

IE 事件模型不支持上面的屬性，為此還需尋求兼容 IE 的方法。而看 clientX 和 clientY 屬性是以 window 對(duì)象為坐標(biāo)系，且 IE 事件模型支持它們，可以選用它們。不過考慮 window 等對(duì)象可能出現(xiàn)的滾動(dòng)條偏移量，所以還應(yīng)加上相對(duì)于 window 對(duì)象的頁(yè)面滾動(dòng)的偏移量。

復(fù)制純文本復(fù)制

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;
}

在上面代碼中，先檢測(cè) pageX 和 pageY 屬性是否存在，如果存在則獲取它們的值；如果不存在，則檢測(cè)并獲取 clientX 和 clientY 屬性值，然后加上 document.documentElement 和 document.body 對(duì)象的 scrollLeft 和 scrollTop 屬性值，這樣在不同瀏覽器中就獲得了相同的坐標(biāo)值。

示例2

封裝鼠標(biāo)定位代碼。設(shè)計(jì)思路：能夠根據(jù)傳遞的具體對(duì)象，以及相對(duì)鼠標(biāo)指針的偏移量，命令該對(duì)象能夠跟隨水保移動(dòng)。

先定義一個(gè)封裝函數(shù)，設(shè)計(jì)函數(shù)傳入?yún)?shù)為對(duì)象引用指針、相對(duì)鼠標(biāo)指針的偏移距離，以及事件對(duì)象。然后封裝函數(shù)能夠根據(jù)事件對(duì)象獲取鼠標(biāo)的坐標(biāo)值，并設(shè)置該對(duì)象為絕對(duì)定位，絕對(duì)定位的值為鼠標(biāo)指針當(dāng)前的坐標(biāo)值。

封裝代碼如下：

復(fù)制純文本復(fù)制

var pos = function (o, x, y, event) {  //鼠標(biāo)定位賦值函數(shù)
    var posX = 0, posY = 0;  //臨時(shí)變量值
    var e = event || window.event;  //標(biāo)準(zhǔn)化事件對(duì)象
    if (e.pageX || e.pageY) {  //獲取鼠標(biāo)指針的當(dāng)前坐標(biāo)值
        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";  //定義當(dāng)前對(duì)象為絕對(duì)定位
    o.style.top = (posY + y) + "px";  //用鼠標(biāo)指針的y軸坐標(biāo)和傳入偏移值設(shè)置對(duì)象y軸坐標(biāo)
    o.style.left = (posX + x) + "px";  //用鼠標(biāo)指針的x軸坐標(biāo)和傳入偏移值設(shè)置對(duì)象x軸坐標(biāo)
}

var pos = function (o, x, y, event) {  //鼠標(biāo)定位賦值函數(shù)
    var posX = 0, posY = 0;  //臨時(shí)變量值
    var e = event || window.event;  //標(biāo)準(zhǔn)化事件對(duì)象
    if (e.pageX || e.pageY) {  //獲取鼠標(biāo)指針的當(dāng)前坐標(biāo)值
        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";  //定義當(dāng)前對(duì)象為絕對(duì)定位
    o.style.top = (posY + y) + "px";  //用鼠標(biāo)指針的y軸坐標(biāo)和傳入偏移值設(shè)置對(duì)象y軸坐標(biāo)
    o.style.left = (posX + x) + "px";  //用鼠標(biāo)指針的x軸坐標(biāo)和傳入偏移值設(shè)置對(duì)象x軸坐標(biāo)
}

下面測(cè)試封裝代碼。為 document 對(duì)象注冊(cè)鼠標(biāo)移動(dòng)事件處理函數(shù)，并傳入鼠標(biāo)定位封裝函數(shù)，傳入的對(duì)象為 <div> 元素，設(shè)置其位置向鼠標(biāo)指針右下方偏移（10,20）的距離。考慮到 DOM 事件模型通過參數(shù)形式傳遞事件對(duì)象，所以不要忘記在調(diào)用函數(shù)中還要傳遞事件對(duì)象。

復(fù)制純文本復(fù)制

<div id="div1">鼠標(biāo)追隨</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

<div id="div1">鼠標(biāo)追隨</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

示例3

獲取鼠標(biāo)指針在元素內(nèi)的坐標(biāo)。使用 offsetX 和 offsetY 屬性可以實(shí)現(xiàn)這樣的目標(biāo)，但是 Mozilla 瀏覽器不支持。可以選用 layerX 和 layerY 屬性來兼容 Mozilla 瀏覽器。

設(shè)計(jì)代碼如下：

復(fù)制純文本復(fù)制

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 屬性是以絕對(duì)定位的父元素為參照物，而不是元素自身。如果沒有絕對(duì)定位的父元素，則會(huì)以 document 對(duì)象為參照物。為此，可以通過腳本動(dòng)態(tài)添加或者手動(dòng)添加的方式，設(shè)計(jì)在元素的外層包圍一個(gè)絕對(duì)定位的父元素，這樣可以解決瀏覽器兼容問題。考慮到元素之間的距離所造成的誤差，可以適當(dāng)減去 1 個(gè)或幾個(gè)像素的偏移量。

完整設(shè)計(jì)代碼如下：

復(fù)制純文本復(fù)制

<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠標(biāo)跟隨</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //標(biāo)準(zhǔn)化事件對(duì)象
        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;">鼠標(biāo)跟隨</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //標(biāo)準(zhǔn)化事件對(duì)象
        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>

這種做法能夠解決在元素內(nèi)部定位鼠標(biāo)指針的問題。但是，由于在元素外面包裹了一個(gè)絕對(duì)定位的元素，會(huì)破壞整個(gè)頁(yè)面的結(jié)構(gòu)布局。在確保這種人為方式不會(huì)導(dǎo)致結(jié)構(gòu)布局混亂的前提下，可以考慮選用這種方法。

到此，關(guān)于“javascript如何獲取鼠標(biāo)位置”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)頁(yè)標(biāo)題：javascript如何獲取鼠標(biāo)位置
文章源于：http://www.chinadenli.net/article20/gicjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣、網(wǎng)站制作、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)