鼠标事件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);