---
# System prepended metadata

title: 12. mousemove 透過游標更新網頁座標資訊
tags: [JavaScript - event 事件]

---

# 12. mousemove 透過游標更新網頁座標資訊

- 利用移動座標的時候，同時更新網頁的座標資訊:

### function(e) 函式內的第一個參數會紀錄各種的詳盡資訊

- 其中此六個 object 則是會紀錄座標的內容：

```
// screen: 捕捉使用者的螢幕大小來撈值
    e.screenX; 
    e.screenY;
```

```
// page: 根據當前使用者的網頁寬高來撈值    
    e.pageX;
    e.pageY;    
```
   
```
// 根據當前 browser 網頁寬高來撈值，
   當網頁視窗大小不一樣時，極限寬高也會跟隨改變

    e.clientX;
    e.clientY; 
```

---

### [HTML CSS 可參考 codepen](https://codepen.io/rrpaqjcq/pen/oNqNGRa)


---

### JS的做法：

```
// 宣告變數 el 為網頁的 body
var el = document.querySelector('.body');

// 捕捉使用者的螢幕大小來撈值
var screenX = document.querySelector('.screenX');
var screenY = document.querySelector('.screenY')

// 根據當前使用者的網頁寬高來撈值
var pageX = document.querySelector('.pageX');
var pageY = document.querySelector('.pageY');

// 根據當前 browser 網頁寬高來撈值，
   當網頁視窗大小不一樣時，極限寬高也會跟隨改變
var clientX = document.querySelector('.clientX');
var clientY = document.querySelector('.clientY');
```

- el 綁定監聽事件，行為：'mousemove'，函式名稱為： pagetarget

2. 並於函式內將前面建立好的DOM 對應變數後面使用 .textContent 的方式撰寫，後面則是 e.screenX; 分別紀錄他們的網頁座標參數

3. 也因為這樣的寫法（textContent），使得在滑動網頁的過程:e.座標
   會直接變成文字內容顯示在dom上，看起來是還滿酷的吧

```
// 事件監聽撰寫：

el.addEventListener('mousemove', pagetarget, false)

function pagetarget(e) {
    screenX.textContent = e.screenX;
    screenY.textContent = e.screenY;
    pageX.textContent = e.pageX;
    pageY.textContent = e.pageY;
    clientX.textContent = e.clientX;
    clientY.textContent = e.clientY;
}
```

![](https://i.imgur.com/SS1CLQe.png)




###### tags: `JavaScript - event 事件`