js鼠標坐標獲取常用的三個方法

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

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

1.相當于你點擊的元素來說（e.offsetX和e.offsetY）

就是以你點擊的元素的左上角作為參考系源點獲取鼠標在元素中點擊的位置

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

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

2.相對于瀏覽器可視窗口來說（e.clientX和e.clientY）

可視窗口是指瀏覽器能夠看到內容的窗口，隨著滾動條移動，可視窗口的位置也在隨著變化，但是都是在以可視窗口的左上角的位置為參考系來獲取鼠標的點擊位置

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

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

以頁面作為為參考系，與可視窗口不一樣，是以整個頁面的左上角作為參考系，不隨滾動條改變而改變,就是一開始頁面的左上角。

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