鼠标事件中鼠标位置的获取

鼠标事件是最常用的一类事件，包括

• click: 单击鼠标左键或按下回车键时触发
• mousedown：按下任意鼠标按键时触发
• mouseup: 松开鼠标按键时触发
• mouseenter: 鼠标光标从元素外部首次移动到元素范围之内时触发，和mouseover不同的是，mouseenter在光标移动到后代元素上时不会触发
• mouseover: 鼠标指针从元素外部移动到元素边界之内时触发，光标移动到后代元素上也会触发
• dbclick：双击鼠标左键

客户区坐标位置

事件对象的clientX和clientY属性，分别表示事件发生时鼠标指针在视口，即可视区域内的水平和垂直坐标

页面坐标位置

事件对象的pageX和pageY属性，分别表示事件发生时鼠标光标在页面中的位置。
如果页面没有滚动，那么pageX和pageY的值与clienX和clientY的值相同
如果页面发生了滚动，event.pageY === document.documentElement.scrollTop + event.clientY

注：如何获取一个元素的位置

可以用element.getBoundingClientRect()
如果要获取鼠标事件相对与一个元素的位置，可以用

var rect = element.getBoundingClientRect()
var x = event.pageX - rect.x
var y = event.pageY - rect.y

屏幕坐标位置

screenX和screenY属性分别表示事件发生时鼠标指针相对于整个屏幕的坐标位置