首页 > 代码库 > Javascript鼠标事件

Javascript鼠标事件

鼠标事件的种类:

click:用户单击左键时发生(单击右键不会发生)。如果焦点在一个按钮上,并按下回车键,也会触发该事件。

dbclick:用户双击鼠标左键时发生(双击右键时不会发生)。

mousedown:用户按下任一个鼠标按键时发生。用事件对象的 button 属性可以获得按下的按键。

mouseup:用户松开一个鼠标按键时发生。用事件对象的 button 属性可以获得按下的按键。

mouseover:用户把鼠标指针移入对象时发生。此时用事件对象的 toElement 属性可以获知移入的对象,用 fromElement 属性可以获知移出的对象。

mouseout:用户把鼠标指针移出对象时发生。此时用事件对象的 toElement 属性可以获知移入的对象,用 fromElement 属性可以获知移出的对象。

mousemove:用户在对象中移动鼠标指针时发生。

事件发生顺序:

一个鼠标动作可能会触发多个事件,它们发生的时刻有所不同,你可以根据需要决定响应哪个事件。

比如单击鼠标左键,会按以下顺序发生事件:

mousedown-mouseup-click

也就是说,我们常用的 click 事件是在松开鼠标左键后才发生的。

双击鼠标左键,会按以下顺序发生事件:

mousedown-mouseup-click-mousedown-mouseup-click-dbclick

事件属性:

当发生了鼠标事件后,event 对象会填写以下属性:

1、type 属性:值为事件的名称。比如,发生了 click 事件后,event.type 的值为 "click"。

2、位置属性:包括 clientX、clientY 等,它们的值是事件发生时鼠标指针的位置,单位为像素。

3、button 属性:表示事件发生时鼠标按键的状态。(不适用于 click 和 dbclick 事件)

4、shiftKey、altKey、ctrlKey 属性:值为 true 或 false,表示事件发生时 Shift、Alt、Ctrl 键的状态。

5、srcElement 属性:值为引起事件的对象。(非IE浏览器为 target 属性)

6、fromElement、toElement 属性:只适用于 mouseover 和 mouseout 事件,值为移出和移入的对象。

Javascript鼠标事件