JavaScript鼠标事件及event坐标

一、事件

1、onclick

事件会在对象被点击时发生
请注意： onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才触发的。

2、onmousedown

事件会在鼠标按键被按下时发生

3、onmouseup

事件会在鼠标按键被松开时发生

4、onmousemove

事件会在鼠标指针移动时发生

5、onmouseover

事件会在鼠标指针移动到指定的对象上时发生

6、onmouseout

事件会在鼠标指针移出指定的对象时发生

二、event中各坐标含义

1、offsetX、offsetY

offsetX：设置或获取鼠标点击位置相对于触发事件对象的水平（X）距离
offsetY：设置或获取鼠标点击位置相对于触发事件对象的垂直（Y）距离

2、clientX、clientY

clientX：设置或获取事件被触发时鼠标指针相对于浏览器可视区域（不计算水平滚动的距离）的水平（X）坐标
clientY：设置或获取事件被触发时鼠标指针相对于浏览器可视区域（不计算水平滚动的距离）的垂直（Y）坐标

3、pageX、pageY

pageX：设置或获取事件被触发时鼠标指针相对于浏览器的水平（X）坐标，也就是clientX加上水平滚动条的距离
pageY：设置或获取事件被触发时鼠标指针相对于浏览器的垂直（Y）坐标，也就是clientY加上垂直滚动条的距离

4、screenX、screenY

screenX：设置或获取事件被触发时鼠标指针相对于用户屏幕的水平（X）坐标
screenY：设置或获取事件被触发时鼠标指针相对于用户屏幕的垂直（Y）坐标

5、x、y

x：设置或获取事件被触发时鼠标指针相对于父元素的水平（X）坐标
y：设置或获取事件被触发时鼠标指针相对于父元素的垂直（Y）坐标

6、layerX、layerY

条件：触发事件对象未设置 position: relative（相对定位）或 position: absolute（绝对定位）
layerX：设置或获取事件被触发时鼠标指针相对于浏览器的水平（X）坐标
layerY：设置或获取事件被触发时鼠标指针相对于浏览器的垂直（Y）坐标
条件：触发事件对象设置了 position: relative（相对定位）或 position: absolute（绝对定位）
layerX：设置或获取事件被触发时鼠标指针相对于触发事件对象的水平（X）坐标
layerY：设置或获取事件被触发时鼠标指针相对于触发事件对象的垂直（Y）坐标