正確使用pageX、pageY、offsetLeft、offsetTop

獲取鼠標位置的時候，遇到一點疑問，然後驗證了一下自己的疑惑；

pageX、pageY跟clientX和clientY類似，是相對於瀏覽器文檔的座標；

offsetLeft、offsetTop獲取的是固定定位，也就是說，監聽某個選擇器內的鼠標位置，這個方法返回的是這個固定範圍的左上角離頁面左上角的距離座標；

下面利用一個簡單的div來演示一下

div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 200px 200px;
        }

對應的我們想要獲取一下當前div元素的上述四個屬性值：

document.querySelector('div').onmousemove = (e) => {
    const x = e.pageX;
    const y = e.pageY;
    const x1 = e.target.offsetLeft;
    const y1 = e.target.offsetTop;
    console.log('x='+x);
    console.log('y='+y);
    console.log('x1='+x1);
    console.log('y1='+y1);
}

針對驗證我們就可以在頁面的控制檯看一下，所得到的值；

當我把鼠標放在div元素的左上角頂點時：

然後當我把鼠標放在div內部時：

其實結合使用這兩個方法，可以得到當前鼠標的位置與包裹元素側邊的距離，對於有些應用會很有幫助；