鼠标事件的种类：

最新推荐文章于 2024-08-04 08:45:07 发布

zyu67

最新推荐文章于 2024-08-04 08:45:07 发布

阅读量1.1k

点赞数

分类专栏： js html

js 同时被 2 个专栏收录

20 篇文章

订阅专栏

html

10 篇文章

订阅专栏

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 事件，值为移出和移入的对象。

举例：调整背景颜色

<div id="area"></div>
<div id="colorbox" οnclick="setAreaColor('#FF7F50')"></div>

<style type="text/css">
#area {
    width: 200px; height: 100px; border: 1px solid #000;
}
#colorbox {
    width: 15px; height: 15px; border: 1px solid #000; cursor: hand; margin-top: 5px; background-color: #FF7F50;
}
</style>
<script type="text/javascript">
function setAreaColor(color)
{
    document.getElementById("area").style.backgroundColor = color;
}
</script>

效果为：

本例定义了一个调色板，当单击调色板中的色块时，可以改变对象的背景颜色。

色块用 <div> 标签定义，其中的 onclick 属性用来响应鼠标单击事件。

举例：翻转图

效果为：

当鼠标移到图中时显示的是另一张图片，鼠标移出时恢复原来的图片。

<img> 标签中的 onmouseover 在鼠标移入时响应，onmouseout 在鼠标移出时响应，this 表示 <img> 标签本身，修改它的 src 属性可以更换图像。

以上实现方法是有缺陷的：两张图片中，第一张图片是在打开网页时就载入了，第二张图片是在鼠标第一次移入时才会下载，这样就造成动画的不连贯。

举例：鼠标跟随

<div id="box">
<div id="abox" οnmοusemοve="moveImg(event)">
<img id="aimg" src="./image/face19.gif" />
</div>
</div>

<style type="text/css">
#box { height: 150px; }
#abox { width: 50%; height: 150px; border: 1px solid #000; cursor: default; position: absolute; }
#aimg { position: absolute; }
</style>
<script type="text/javascript">
function moveImg(oEvent)
{
document.getElementById("aimg").style.left = oEvent.offsetX;
document.getElementById("aimg").style.top = oEvent.offsetY-50;
}
</script>

效果为：