鼠标事件

在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示:

 

鼠标事件类型

事件类型

说明

click

单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件

dblclick

双击鼠标左键时发生,如果右键也按下则不会发生

mousedown

单击任意一个鼠标按钮时发生

mouseout

鼠标指针位于某个元素上且将要移出元素的边界时发生

mouseover

鼠标指针移出某个元素到另一个元素上时发生

mouseup

松开任意一个鼠标按钮时发生

mousemove

鼠标在某个元素上时持续发生

鼠标点击

鼠标点击事件包括 4 个:click(单击)、dblclick(双击)、mousedown(按下)和 mouseup(松开)。其中 click 事件类型比较常用,而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时,会禁止绑定对象的默认行为。

鼠标移动

mousemove 事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动一个像素),就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。

鼠标经过

鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时,将触发 mouseover 事件;而当把鼠标指针移出某个元素时,将触发 mouseout 事件。如果从父元素中移到子元素中时,也会触发父元素的 mouseover 事件类型。

鼠标来源

当一个事件发生后,可以使用事件对象的 target 属性获取发生事件的节点元素。如果在 IE 事件模型中实现相同的目标,可以使用 srcElement 属性。

鼠标按键

通过事件对象的 button 属性可以获取当前鼠标按下的键,该属性可用于 click、mousedown、mouseup 事件类型。不过不同模型的约定不同,具体说明如下表所示。

鼠标事件对象的 button 属性

单击

IE 事件模型

DOM 事件模型

左键

1

0

右键

2

2

中键

4

1

IE 事件模型支持位掩码技术,它能够侦测到同时按下的多个键。例如,同时按下左右键,则 button 属性值为 1+2=3;同时按下中键和右键,则 button 属性值为 2+4=6;同时按下左键和中键,则 button 属性值为 1+4=5;同时按下 3 个键,则 button 属性值为 1+2+4=7。但是 DOM 模型不支持这种掩码技术,如果同时按下多个键,就不能够准确侦测。例如,按下右键(2)与同时按下左键和右键(0+2=2)的值是相同的。因此,对于 DOM 模型来说,这种 button 属性约定值存在很大的缺陷。不过,在实际开发中很少需要同时检测多个鼠标按钮问题,一般仅需要探测鼠标左键或右键单击行为。

鼠标定位

当事件发生时,获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性,不同浏览器分别在各自事件对象中定义了不同的属性,说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标,但是由于它们参照的坐标系不同,导致精确计算鼠标的位置比较麻烦。

属性及其兼容性

属性

说明

兼容性

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