JavaScript鼠标事件
JS鼠标事件
在 JavaScript 中，鼠标事件是 Web 开发中最常用的事件类型，
| 事件类型 | 说明 |
|---|---|
| click | 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件 |
| dblclick | 双击鼠标左键时发生，如果右键也按下则不会发生 |
| mousedown | 单击任意一个鼠标按钮时发生 |
| mouseout | 鼠标指针位于某个元素上且将要移出元素的边界时发生 |
| mouseover | 鼠标指针移出某个元素到另一个元素上时发生 |
| mouseup | 松开任意一个鼠标按钮时发生 |
| mousemove | 鼠标在某个元素上时持续发生 |
onmouseover //注册鼠标经过时事件处理函数
onmouseout //注册鼠标移开时事件处理函数
onmousedown //注册鼠标按下时事件处理函数
onmouseup //注册鼠标松开时事件处理函数
onmousemove //注册鼠标移动时事件处理函数
onclick //注册鼠标单击时事件处理函数
ondblclick //注册鼠标双击时事件处理函数
鼠标点击
鼠标点击事件包括 4 个：click（单击）、dblclick（双击）、mousedown（按下）和 mouseup（松开）。其中 click 事件类型比较常用，而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时，会禁止绑定对象的默认行为。
鼠标移动
mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。
鼠标经过
鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发 mouseover 事件；而当把鼠标指针移出某个元素时，将触发 mouseout 事件。如果从父元素中移到子元素中时，也会触发父元素的 mouseover 事件类型。
鼠标定位
当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。
| 属性 | 说明 | 兼容性 |
|---|---|---|
| clientX | 以浏览器窗口左上顶角为原点，定位 x 轴坐标 | 所有浏览器，不兼容 Safari |
| clientY | 以浏览器窗口左上顶角为原点，定位 y 轴坐标 | 所有浏览器，不兼容 Safari |
| offsetX | 以当前事件的目标对象左上顶角为原点，定位 x 轴坐标 | 所有浏览器，不兼容 Mozilla |
| offsetY | 以当前事件的目标对象左上顶角为原点，定位 y 轴坐标 | 所有浏览器，不兼容 Mozilla |
| pageX | 以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标 | 所有浏览器，不兼容 IE |
| pageY | 以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标 | 所有浏览器，不兼容 IE |
| screenX | 计算机屏幕左上顶角为原点，定位 x 轴坐标 | 所有浏览器 |
| screenY | 计算机屏幕左上顶角为原点，定位 y 轴坐标 | 所有浏览器 |
| layerX | 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴坐标 | Mozilla 和 Safari |
| layerY | 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴坐标 | Mozilla 和 Safari |
