快捷導(dǎo)航

js鼠標(biāo)坐標(biāo)獲取常用的三個(gè)方法

更新時(shí)間：2023年09月05日 10:46:17 作者：ljxyydx

這篇文章主要給大家介紹了js鼠標(biāo)坐標(biāo)獲取常用的三個(gè)方法,在 JavaScript中當(dāng)事件發(fā)生時(shí)獲取鼠標(biāo)的位置是件很重要的事件,需要的朋友可以參考下

1.相當(dāng)于你點(diǎn)擊的元素來(lái)說(shuō) （e.offsetX和e.offsetY）

就是以你點(diǎn)擊的元素的左上角作為參考系源點(diǎn)獲取鼠標(biāo)在元素中點(diǎn)擊的位置

<style>
    div{
        width: 300px;
        height: 300px;
        background-color: rebeccapurple;
        color: wheat;
        margin: 300px auto;
    }
</style>
<body>
    <div>我的橫坐標(biāo)x:,我的縱坐標(biāo)y:</div>
</body>
<script>
    var oDiv = document.querySelector('div')
        oDiv.onclick = function (e) {
            console.log(e.offsetX)
            console.log(e.offsetY)
            // 渲染函數(shù) 
            oDiv.innerHTML = '相對(duì)于我點(diǎn)擊的這個(gè)元素來(lái)講我的橫坐標(biāo)x:' + e.offsetX + ',我的縱                
坐標(biāo)y:' + e.offsetY
        }
</script>

在給div添加點(diǎn)擊事件，在點(diǎn)擊事件中傳入事件源e，e中保存著鼠標(biāo)的點(diǎn)擊坐標(biāo)，我們用offsetX和offsetY就可以獲取到鼠標(biāo)在div中的點(diǎn)擊坐標(biāo)。

2.相對(duì)于瀏覽器可視窗口來(lái)說(shuō)（e.clientX和e.clientY）

可視窗口是指瀏覽器能夠看到內(nèi)容的窗口，隨著滾動(dòng)條移動(dòng)，可視窗口的位置也在隨著變化，但是都是在以可視窗口的左上角的位置為參考系來(lái)獲取鼠標(biāo)的點(diǎn)擊位置

oDiv.onclick = function (e) {
            console.log(e.clientX)
            console.log(e.clientY)
            // 渲染函數(shù) 
            oDiv.innerHTML = '相對(duì)于瀏覽器可視窗口來(lái)講我的橫坐標(biāo)x:' + e.clientX + ',我的縱坐標(biāo)y:' + e.clientY
        }

3.以頁(yè)面左上角作為參考系(e.pageX 和 e.pageY)

以頁(yè)面作為為參考系，與可視窗口不一樣，是以整個(gè)頁(yè)面的左上角作為參考系，不隨滾動(dòng)條改變而改變,就是一開(kāi)始頁(yè)面的左上角。

oDiv.onclick = function (e) {
            console.log(e.pageX)
            console.log(e.pageY)
            // 渲染函數(shù) 
            oDiv.innerHTML = '相對(duì)于頁(yè)面來(lái)講我的橫坐標(biāo)x:' + e.pageX + ',我的縱坐標(biāo)y:' + e.pageY
        }