JavaScript 中常见的鼠标事件及应用

在 JavaScript 中，鼠标事件是用户与网页进行交互的重要方式，通过监听这些事件，开发者可以实现各种交互效果，如点击、悬停、拖动等。
在 JavaScript 中，鼠标事件类型多样，下面为你详细介绍常见的鼠标事件类型及应用：

一. 基础交互事件

1. `click`

触发时机：

当用户在元素上按下并释放鼠标主按钮（通常是左键）时触发。

应用场景：

常用于处理按钮点击、链接跳转、表单提交等操作。

示例代码：

<!DOCTYPE html>
<html lang="en">
<body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');button.addEventListener('click', function () {alert('按钮被点击了！');});</script>
</body>
</html>

2. `dblclick`

触发时机：

当用户在短时间内快速连续点击两次鼠标主按钮时触发。

应用场景：

可用于实现双击放大图片、编辑文本等功能。

示例代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head><style>#myDiv {width: 200px;height: 200px;background-color: lightblue; /* 初始背景颜色 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */font-size: 30px;font-weight: bold;}</style>
</head>
<body><h1>双击鼠标事件，改变颜色</h1><div id="myDiv">双击我，<br>改变颜色</div><script>const div = document.getElementById('myDiv');// 颜色数组const color = ['lightblue', 'pink', 'lightgreen', 'lightyellow', 'lightgray']; // 初始化计数器为-1，以便第一次双击时颜色数组从索引0开始变化let dblcount = -1; // 添加双击事件监听器div.addEventListener('dblclick', function () {dblcount++;// 循环改变背景颜色this.style.backgroundColor = color[dblcount % color.length]; });</script>
</body>
</html>

二、按钮状态事件

3. `mousedown`

触发时机：

当用户在元素上按下任意鼠标按钮时触发。

应用场景：

常用于实现拖动元素、绘制图形等操作的起始点。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Untitled-1</title>
</head>
<body><h1>鼠标事件-按下</h1><div id="draggable" style="width:100px;height:100px;background-color:red;">拖动我</div><script>const draggable = document.getElementById('draggable');draggable.addEventListener('mousedown', function () {console.log('鼠标按下');draggable.style.backgroundColor = 'blue';});</script>
</body>
</html>

4. `mouseup`

触发时机：

当用户在元素上释放之前按下的鼠标按钮时触发。

应用场景：

通常与 mousedown 事件配合使用，用于完成拖动、绘制等操作。

示例代码：

<!DOCTYPE html>
<html lang="en">
<body><div id="drawArea" style="width: 200px; height: 200px; border: 1px solid black;"></div><script>const drawArea = document.getElementById('drawArea');drawArea.addEventListener('mousedown', function () {console.log('鼠标按下');drawArea.style.backgroundColor = 'blue';});drawArea.addEventListener('mouseup', function () {console.log('鼠标释放');drawArea.style.backgroundColor = 'red';});</script>
</body>
</html>

此代码的主要功能是通过监听鼠标在指定div上的按下和释放事件，实现div背景颜色的变化。具体来说：

当用户点击div时，div的背景颜色会变为蓝色，同时在控制台输出“鼠标按下”。
当用户松开鼠标时，div的背景颜色会变为红色，同时在控制台输出“鼠标释放”。

这段代码主要用于演示如何使用JavaScript的事件监听机制来响应用户的鼠标操作，并实时更新网页元素的样式。

三、鼠标移动事件

5. `mousemove`

触发时机：

当鼠标指针在元素上移动时，会持续触发该事件。

应用场景：

常用于实现鼠标跟随效果、绘制轨迹、实时更新鼠标位置信息等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<body><div id="moveArea" style="width: 200px; height: 200px; border: 1px solid black;"></div><p>请在黑色区域内移动鼠标，并查看下面的鼠标位置。</p><p>鼠标位置: (0, 0)</p><script>const moveArea = document.getElementById('moveArea');moveArea.addEventListener('mousemove', function (event) {console.log(`鼠标位置: (${event.offsetX}, ${event.offsetY})`);// 使用querySelector选择页面中最后一个<p>标签，并将其文本内容更新为当前鼠标的位置。document.querySelector('p:last-of-type').textContent = `鼠标位置: (${event.offsetX}, ${event.offsetY})`;});</script>
</body>
</html>

这段代码的主要功能是在网页上创建一个200x200像素的黑色边框区域，并实时显示用户在这个区域内的鼠标位置。每当鼠标在该区域内移动时，位置信息会被更新到页面上的最后一个段落标签中，并且在控制台中输出。

6. `mouseover`、`mouseout`

触发时机：

mouseover当鼠标指针从元素外部移动到元素内部时触发，并且当鼠标进入该元素的子元素时也会触发。mouseout当鼠标指针从元素内部移动到元素外部时触发，并且当鼠标离开该元素的子元素时也会触发。

应用场景：

mouseover常用于实现鼠标悬停效果，如显示下拉菜单、改变元素样式等。mouseout通常与 mouseover 事件配合，用于恢复元素的原始样式。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标悬停切换类</title><style>/* 设置div的基本样式 */div {position: relative;display: inline-block;place-content: center;text-align: center;font-size: 20px;color: white;cursor: pointer;}/* 定义原始样式 */.original {width: 180px;height: 180px;background-color: lightgray;}/* 定义悬停时的样式 */.hovered {width: 180px;height: 180px;background-color: pink;border: 2px solid black;}</style>
</head>
<body><!-- 创建一个div元素，初始应用original样式 --><div id="element" class="original">悬停切换样式</div><script>// 获取id为element的div元素const element = document.getElementById('element');// 添加鼠标悬停事件监听器，切换到hovered样式element.addEventListener('mouseover', function () {this.classList.remove('original');this.classList.add('hovered');});// 添加鼠标移出事件监听器，切换回original样式element.addEventListener('mouseout', function () {this.classList.remove('hovered');this.classList.add('original');});</script>
</body>
</html>

这段代码的主要功能是在网页上实现一个简单的鼠标悬停效果。当用户将鼠标悬停在特定的div元素上时，该元素的背景颜色会从浅灰色变为粉色，并且增加一个黑色边框。当鼠标移开时，div元素的样式会恢复到原来的浅灰色背景无边框状态。这是一种常见的交互设计，用于提高用户体验，通过视觉反馈来告知用户他们与页面元素的交互状态。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>悬停下拉菜单示例</title><style>.menu {list-style-type: none;margin: 0;padding: 0;}.menu-item {position: relative;display: inline-block;}.menu-item a {display: block;padding: 10px;color: #fff;background-color: #007BFF;text-decoration: none;}.submenu {display: none;position: absolute;top: 100%;left: 0;background-color: #007BFF;list-style-type: none;margin: 0;padding: 0;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}.submenu li {width: 200px;}.submenu li a {padding: 12px 16px;text-decoration: none;display: block;color: white;}.submenu li a:hover {background-color: #555;}</style>
</head>
<body><ul class="menu"><li class="menu-item"><a href="#">菜单项1</a><ul class="submenu"><li><a href="#">子菜单项1-1</a></li><li><a href="#">子菜单项1-2</a></li><li><a href="#">子菜单项1-3</a></li></ul></li><li class="menu-item"><a href="#">菜单项2</a><ul class="submenu"><li><a href="#">子菜单项2-1</a></li><li><a href="#">子菜单项2-2</a></li><li><a href="#">子菜单项2-3</a></li></ul></li></ul><script>document.addEventListener('DOMContentLoaded', function () {const menuItems = document.querySelectorAll('.menu-item');menuItems.forEach(function (item) {item.addEventListener('mouseover', function () {const submenu = this.querySelector('.submenu');if (submenu) {submenu.style.display = 'block';}});item.addEventListener('mouseout', function () {const submenu = this.querySelector('.submenu');if (submenu) {submenu.style.display = 'none';}});});});</script>
</body>
</html>

下面是对 javascript 代码的逐步分解：

document.addEventListener('DOMContentLoaded', function () { ... });
- 这行代码的作用是监听整个文档是否已经完全加载完毕。只有在文档加载完成后，脚本中的内容才会被执行，确保在操作DOM元素时这些元素已经存在。
const menuItems = document.querySelectorAll('.menu-item');
- 使用querySelectorAll方法选择所有带有menu-item类名的元素，并将它们存储在一个NodeList对象menuItems中。在这个例子中，menuItems包含了两个菜单项，即“菜单项1”和“菜单项2”。
menuItems.forEach(function (item) { ... });
- 对于NodeList中的每一个元素（即每个菜单项），执行一次回调函数。回调函数中的参数item代表当前正在处理的菜单项。
item.addEventListener('mouseover', function () { ... });
- 为每个菜单项添加一个mouseover事件监听器。当鼠标进入菜单项时，会触发回调函数中的代码。
const submenu = this.querySelector('.submenu');
- 在mouseover事件的回调函数中，this指向触发事件的菜单项。通过querySelector方法，我们在这个菜单项内部查找第一个带有submenu类名的元素，即子菜单。
if (submenu) { submenu.style.display = 'block'; }
- 如果找到了子菜单（即submenu不为null），则将它的display属性设置为’block’，使子菜单显示出来。
item.addEventListener('mouseout', function () { ... });
- 为每个菜单项添加一个mouseout事件监听器。当鼠标离开菜单项时，会触发回调函数中的代码。
if (submenu) { submenu.style.display = 'none'; }
- 同样地，在mouseout事件的回调函数中，如果找到了子菜单，则将其display属性设置为’none’，使子菜单隐藏起来。

7. `mouseenter`、`mouseleave`

触发时机：

mouseenter当鼠标指针从元素外部移动到元素内部时触发，但当鼠标进入该元素的子元素时不会再次触发。mouseleave当鼠标指针从元素内部移动到元素外部时触发，但当鼠标离开该元素的子元素时不会触发。

应用场景：

mouseenter与 mouseover 类似，但不会受子元素影响，适合需要精确控制悬停范围的场景。
mouseleave与 mouseout 类似，但不会受子元素影响，常与 mouseenter 配合使用。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>mouseenter 事件示例</title><style>.tooltip {display: none;position: absolute;background-color: #007BFF;color: white;padding: 5px 10px;border-radius: 5px;font-size: 12px;}.button-container {position: relative;display: inline-block;}</style>
</head>
<body><div class="button-container"><button id="myButton">悬停我</button><div class="tooltip" id="myTooltip">这是一个提示信息</div></div><script>document.addEventListener('DOMContentLoaded', function () {const button = document.getElementById('myButton');const tooltip = document.getElementById('myTooltip');button.addEventListener('mouseenter', function () {// 显示提示框tooltip.style.display = 'block';// 获取按钮的位置，并设置提示框的位置const buttonRect = button.getBoundingClientRect();tooltip.style.top = `${buttonRect.bottom + window.scrollY}px`;tooltip.style.left = `${buttonRect.left + window.scrollX}px`;});button.addEventListener('mouseleave', function () {// 隐藏提示框tooltip.style.display = 'none';});});</script>
</body>
</html>

mouseenter 事件与 mouseover 事件的主要区别在于，mouseenter 不会冒泡到其子元素上，而 mouseover 会。这意味着当鼠标进入一个元素时，mouseenter 只会触发一次，而 mouseover 可能在鼠标进入子元素时再次触发。

mouseenter 事件最适合用于需要精确控制事件只在特定元素上触发的场景，而不需要考虑子元素的情况。例如，当你想要在鼠标进入某个按钮时显示一个提示，但不希望在子元素上重复显示这个提示时，可以使用 mouseenter。

在上面的示例中，我们创建了一个按钮和一个提示框。当鼠标进入按钮区域时，使用 mouseenter事件来显示提示框，并根据按钮的位置动态设置提示框的位置，确保提示框显示在按钮下方。当鼠标离开按钮区域时，使用 mouseleave 事件来隐藏提示框。

这里使用 mouseenter 和 mouseleave 事件而不是 mouseover 和 mouseout 事件，是为了避免当鼠标移动到按钮的子元素（如果有）时，提示框被重复显示或隐藏。在这个简单的例子中，按钮没有子元素，但如果有更复杂的结构，mouseenter 和 mouseleave 的非冒泡特性会更显优势。

四、鼠标滚轮事件

8. `wheel`

触发时机：

当用户滚动鼠标滚轮时触发。

应用场景：

常用于实现页面滚动、缩放元素、切换幻灯片等功能。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚轮事件示例</title><style>body {height: 2000px; /* 为了能看到滚动效果 */}</style>
</head>
<body>
<script>// 获取body元素var body = document.body;// 添加滚轮事件监听器body.addEventListener('wheel', function(event) {// 阻止默认行为event.preventDefault();// 判断滚轮滚动的方向if (event.deltaY > 0) {console.log(event.deltaY);console.log('向下滚动');} else {console.log('向上滚动');}});
</script>
</body>
</html>

这段代码的主要功能是在网页的<body>元素上添加一个滚轮事件监听器，用于检测用户鼠标滚轮的滚动方向，并在控制台中输出滚动方向的信息。需要注意的是，这段代码还阻止了页面的默认滚动行为，因此即使用户尝试滚动鼠标滚轮，页面也不会发生自动的上下滚动。

五、鼠标右键事件

9. `contextmenu`

触发时机：

当用户在元素上点击鼠标右键时触发。

应用场景：

可用于自定义上下文菜单，替代浏览器默认的右键菜单。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>右击事件示例</title><style>body {height: 2000px;/* 为了能看到滚动效果 */position: relative;}#customMenu {display: none;position: absolute;background-color: #f9f9f9;border: 1px solid #d3d3d3;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);padding: 5px 0;width: 150px;z-index: 1000;}#customMenu div {padding: 8px 15px;cursor: pointer;}#customMenu div:hover {background-color: #ddd;}</style>
</head>
<body><div id="customMenu"><div onclick="showAlert('选项1')">选项1</div><div onclick="showAlert('选项2')">选项2</div><div onclick="showAlert('选项3')">选项3</div></div><script>// 获取body元素，以便在页面上添加事件监听器var body = document.body;// 获取自定义菜单元素，该元素在用户右击时显示var customMenu = document.getElementById('customMenu');// 添加右击事件监听器body.addEventListener('contextmenu', function (event) {// 阻止默认行为（显示浏览器的上下文菜单）event.preventDefault();// 设置自定义菜单的位置为鼠标点击的位置customMenu.style.left = event.pageX + 'px';customMenu.style.top = event.pageY + 'px';// 显示自定义菜单customMenu.style.display = 'block';});// 添加点击页面其他地方隐藏菜单的事件监听器document.addEventListener('click', function (event) {if (event.target !== customMenu) {customMenu.style.display = 'none';}});// 显示弹窗的函数，用于测试菜单选项function showAlert(option) {alert('你点击了：' + option);}</script>
</body>
</html>