鼠標事件MouseEvent對象的一些座標屬性總結

MouseEvent 接口指用戶與指針設備( 如鼠標 )交互時發生的事件。使用此接口的常見事件包括：click，dblclick，mouseup，mousedown。

MouseEvent 派生自 UIEvent，UIEvent 派生自 Event. 如下圖所示.

寫一段代碼

<style>
* {
  padding: 0;
  margin: 0;
}

div {
  width: 100px;
  height: 100px;
  background-color: #f78;
  border: 2px solid #b2b2b2;
  margin: 50px auto;
}
</style>
<div></div>

var div = document.querySelector('div')

div.addEventListener('click', clickHandler)

function clickHandler(e) {
	// 這裏的 e 其實就是一個 MouseEnevt 對象
  console.log(e);
}

當我們點擊 div 的時候，就會打印 MouseEvent 對象 ,以下框起來的屬性就是座標相關的屬性啦。

clientX、clientY、x、y

返回當前點擊的位置到可視區域的頂部和左側的距離

function clickHandler(e) {
  console.log(e.clientX, e.clientY);
}

x、y 是 MouseEvent.clientX 和 MouseEvent.clientY 的別名. 所以是和他倆一樣一樣的.

offsetX、offsetY

相對於目標元素e.target 的左上角距離

var div = document.querySelector('div')
div.addEventListener('click', clickHandler)
function clickHandler(e) {
  console.log(e.offsetX, e.offsetY);	
}

pageX、pageY、screenX、screenY

pageX、pageY 是相對於頁面左上角的距離
screenX、screenY 是相對於屏幕左上角的距離

console.log(e.pageX, e.pageY);
console.log(e.screenX, e.screenY);