clientX、offsetX、screenX、pageX、x的区别

	div{
			height: 100px;
			width: 100px;
			background-color: red;
		}
	<div></div>
		var div = document.getElementsByTagName('div')[0];
		div.onclick= function (e){
			console.log(e)
		}

当我们利用鼠标的点击事件，将event事件打印出来，可以得到clientX、offsetX、screenX、pageX、x等信息，那么这些都是x，有什么区别吗？

1. clientX ：属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
   客户区指的是当前窗口。
   这是w3c给出的标准解释，也就是说在整个文档流中，相对于左上角的位置。
   获取鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变

2. offsetX：属性用于获取鼠标指针在指定元素x轴方向的偏移量，也就是在x轴的坐标；
   也就是说将自身元素的左上角作为一个坐标原点

3. screenX：属性可返回事件发生时鼠标指针相对于屏幕的水平坐标
   也就是说相对于整个电脑的屏幕的位置，同样以左上角为原点

4. pageX：与clientX类似，但又不同
   获取鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变

5. x:与clientX相同