## 鼠标 API### 简介 鼠标 API 允许开发者访问和控制与鼠标相关的功能。通过这些 API，开发者可以获取鼠标当前状态信息（例如位置、按钮状态），还可以模拟鼠标事件（例如移动、点击、滚动）。这对于开发交互式网页、游戏以及需要精确控制鼠标行为的应用程序非常有用。### 鼠标事件 鼠标 API 主要通过事件监听器来实现交互。以下是一些常见的鼠标事件：

mousedown

: 当鼠标按钮被按下时触发。

mouseup

: 当鼠标按钮被释放时触发。

click

: 当鼠标在同一个元素上按下并释放时触发 (通常指鼠标左键)。

dblclick

: 当鼠标在同一个元素上快速双击时触发。

contextmenu

: 当鼠标右键被点击时触发 (通常用于打开上下文菜单)。

mousemove

: 当鼠标在元素上移动时持续触发。

mouseover

: 当鼠标指针进入元素区域时触发。

mouseout

: 当鼠标指针离开元素区域时触发。

wheel

: 当鼠标滚轮滚动时触发。### 属性和方法#### 事件对象属性 大多数鼠标事件会传递一个事件对象作为参数，其中包含以下常用属性：

clientX/clientY

: 鼠标指针相对于浏览器视窗左上角的 X/Y 坐标。

pageX/pageY

: 鼠标指针相对于文档左上角的 X/Y 坐标 (包含滚动条滚动的距离)。

screenX/screenY

: 鼠标指针相对于屏幕左上角的 X/Y 坐标。

button

: 表示按下的是哪个鼠标按钮 (0: 左键, 1: 中键, 2: 右键)。

ctrlKey/shiftKey/altKey/metaKey

: 表示按下鼠标时，Ctrl/Shift/Alt/Meta 键是否被按下。

deltaX/deltaY

: 表示鼠标滚轮滚动的水平/垂直方向和距离.#### 常用方法

addEventListener()

: 为元素添加事件监听器。

removeEventListener()

: 移除元素上的事件监听器。

preventDefault()

: 阻止事件的默认行为。

stopPropagation()

: 阻止事件冒泡到父元素。### 示例以下是一些简单的示例，演示如何使用鼠标 API：#### 1. 获取鼠标点击位置并显示：```html 鼠标点击位置

```#### 2. 判断鼠标按键：```javascript document.addEventListener('mousedown', function(event) {switch (event.button) {case 0:console.log('按下鼠标左键');break;case 1:console.log('按下鼠标中键');break;case 2:console.log('按下鼠标右键');break;default:break;} }); ```### 总结鼠标 API 提供了丰富的功能，允许开发者创建各种交互式体验。通过学习和使用这些 API，开发者可以构建更加用户友好和功能强大的应用程序。

标签: 鼠标api