当前位置：首页 > web >正文

JavaScript基础-常用的鼠标事件

web 2025/6/17 6:30:11

一、前言

在前端开发中，鼠标事件 是实现用户交互的重要手段之一。通过监听用户的点击、移动、悬停等操作，我们可以构建出丰富而灵活的网页交互体验。

本文将带你深入了解：

JavaScript 中常见的鼠标事件；
各类鼠标事件的触发时机；
如何获取鼠标位置信息；
实际开发中的典型使用场景；
推荐的最佳实践；

通过这篇文章，你将掌握如何利用鼠标事件来提升网页的交互性与用户体验。

二、常见的鼠标事件类型

事件类型	触发条件	是否冒泡
`click`	鼠标左键单击（按下 + 松开）	✅ 是
`mousedown`	鼠标按键按下时触发	✅ 是
`mouseup`	鼠标按键松开时触发	✅ 是
`mousemove`	鼠标在元素上移动时持续触发	✅ 是
`mouseover`	鼠标移入元素或其子元素时触发	✅ 是
`mouseout`	鼠标移出元素或其子元素时触发	✅ 是
`mouseenter`	鼠标进入元素边界时触发（不冒泡）	❌ 否
`mouseleave`	鼠标离开元素边界时触发（不冒泡）	❌ 否

📌 小贴士：

mouseenter 和 mouseleave 不会因子元素触发而频繁触发，适合用于 hover 效果；
mouseover 和 mouseout 会在子元素切换时多次触发，适用于更复杂的交互逻辑。

三、常用鼠标事件详解

1. `click`

当用户点击元素（通常为鼠标左键）时触发。

document.getElementById('btn').addEventListener('click', function () {alert('按钮被点击了')
})

📌 应用场景：

按钮点击提交；
切换状态；
弹窗显示/隐藏；

2. `mousedown` 与 `mouseup`

这两个事件分别在鼠标按键按下和释放时触发，常用于拖拽、绘图等功能。

const box = document.getElementById('box')box.addEventListener('mousedown', () => {console.log('鼠标按下')
})box.addEventListener('mouseup', () => {console.log('鼠标释放')
})

📌 应用场景：

自定义拖拽组件；
拖动排序；
按住按钮执行某个动作（如音量调节）；

3. `mousemove`

当鼠标在元素内移动时持续触发，频率较高，注意性能优化。

document.getElementById('canvas').addEventListener('mousemove', function(event) {console.log(`鼠标坐标: ${event.clientX}, ${event.clientY}`)
})

📌 应用场景：

绘图工具；
鼠标跟随特效；
实时反馈鼠标位置；

4. `mouseover` 与 `mouseout`

当鼠标进入或离开元素及其子元素时触发，适用于菜单展开收起、提示框展示等场景。

const menu = document.getElementById('menu')menu.addEventListener('mouseover', () => {console.log('鼠标进入菜单区域')
})menu.addEventListener('mouseout', () => {console.log('鼠标离开菜单区域')
})

📌 注意：

子元素切换会导致反复触发；
若希望只在父元素进出时触发，推荐使用 mouseenter / mouseleave。

5. `mouseenter` 与 `mouseleave`

仅在鼠标进入或离开目标元素本身时触发，不会因为子元素的变化而重复触发。

const tooltip = document.getElementById('tooltip')tooltip.addEventListener('mouseenter', () => {console.log('鼠标进入提示框')
})tooltip.addEventListener('mouseleave', () => {console.log('鼠标离开提示框')
})

📌 推荐使用场景：

工具提示（tooltip）展示与隐藏；
Hover 动画控制；
图片放大镜效果；

四、获取鼠标位置信息

鼠标事件对象提供了多个属性用于获取鼠标的当前位置和偏移量：

属性	描述
`clientX`, `clientY`	相对于浏览器视口的位置（不包括滚动条）
`pageX`, `pageY`	相对于整个页面的位置（包括滚动条）
`offsetX`, `offsetY`	相对于事件目标元素的位置
`screenX`, `screenY`	相对于屏幕的位置

document.addEventListener('mousemove', function (e) {console.log('client:', e.clientX, e.clientY)console.log('page:', e.pageX, e.pageY)console.log('screen:', e.screenX, e.screenY)
})

📌 使用建议：

页面定位 → 使用 pageX/Y
视口定位 → 使用 clientX/Y
元素内部定位 → 使用 offsetX/Y

五、阻止默认行为与事件传播

有时我们希望阻止某些默认行为或停止事件继续传播：

✅ 阻止默认行为

document.querySelector('a').addEventListener('click', function (e) {e.preventDefault()console.log('链接被点击，但没有跳转')
})

✅ 阻止事件冒泡

document.getElementById('child').addEventListener('click', function (e) {e.stopPropagation()console.log('子元素被点击，父级不会收到事件')
})

六、实际开发中的常见应用场景

场景	描述
表格行点击高亮	点击某一行时应用背景色
拖拽功能	结合 `mousedown`、`mousemove`、`mouseup` 实现拖放
菜单下拉展开	使用 `mouseenter` / `mouseleave` 控制显示隐藏
图片预览缩略图	鼠标悬停时显示大图
鼠标轨迹绘制	在 canvas 上记录并绘制鼠标路径
鼠标右键菜单	使用 `contextmenu` 事件自定义菜单
鼠标长按操作	利用 `mousedown` + `setTimeout` 实现长按逻辑

七、最佳实践与注意事项

项目	建议
多个事件绑定	使用统一处理函数，避免重复代码
性能优化	对高频事件（如 `mousemove`）进行节流或防抖处理
事件解绑	组件卸载时及时移除监听器，防止内存泄漏
避免阻塞主线程	避免在鼠标事件中执行耗时任务
移动端兼容	注意触摸屏下的模拟鼠标事件行为差异
浏览器兼容性	使用标准 API 并考虑 polyfill 支持旧版浏览器

八、总结对比表

事件类型	是否冒泡	适用场景
`click`	✅	点击交互
`mousedown`	✅	开始拖拽、长按检测
`mouseup`	✅	结束拖拽、确认操作
`mousemove`	✅	实时反馈、绘图
`mouseover`	✅	悬停响应（含子元素）
`mouseout`	✅	离开响应（含子元素）
`mouseenter`	❌	悬停响应（不含子元素）
`mouseleave`	❌	离开响应（不含子元素）