javascript鼠标事件

封面图 • 2025-12-05 • JavaScript

JavaScript 中的**鼠标事件**是指用户通过鼠标与网页进行交互时触发的事件。这些事件可以用来响应用户的点击、移动、悬停等操作。

---

## ✅ 常见的鼠标事件

| 事件名称        | 触发条件                          | 说明                             |
|-----------------|-----------------------------------|----------------------------------|
| `click`         | 鼠标左键单击                      | 最常用的点击事件                 |
| `dblclick`      | 鼠标左键双击                      | 双击事件                         |
| `mousedown`     | 鼠标按钮被按下                    | 按下时触发（不一定是左键）       |
| `mouseup`       | 鼠标按钮被释放                    | 按下后释放时触发                 |
| `mousemove`     | 鼠标在元素上移动                  | 可用于追踪鼠标位置               |
| `mouseover`     | 鼠标进入元素区域                  | 当鼠标移到元素上时触发           |
| `mouseout`      | 鼠标离开元素区域                  | 当鼠标移出元素时触发             |
| `mouseenter`    | 鼠标进入元素区域（不冒泡）        | 不会冒泡，适用于子元素的情况     |
| `mouseleave`    | 鼠标离开元素区域（不冒泡）        | 不会冒泡，适用于子元素的情况     |
| `contextmenu`   | 右键点击（打开上下文菜单）        | 通常用于自定义右键菜单            |

---

## 🧩 示例代码

### 1. 点击事件 `click`

```javascript
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});
```

### 2. 移动事件 `mousemove`

```javascript
document.addEventListener("mousemove", function(event) {
    console.log("鼠标坐标：", event.clientX, event.clientY);
});
```

### 3. 鼠标悬停事件 `mouseover` / `mouseout`

```javascript
const box = document.getElementById("box");

box.addEventListener("mouseover", function() {
    box.style.backgroundColor = "lightblue";
});

box.addEventListener("mouseout", function() {
    box.style.backgroundColor = "white";
});
```

### 4. 右键菜单事件 `contextmenu`

```javascript
document.addEventListener("contextmenu", function(event) {
    event.preventDefault(); // 阻止默认右键菜单
    alert("你右键点击了页面！");
});
```

---

## 📝 事件对象属性

鼠标事件的回调函数中会传入一个 **Event 对象**，包含以下常用属性：

| 属性名          | 说明                                 |
|-----------------|--------------------------------------|
| `clientX`, `clientY` | 鼠标相对于浏览器窗口的位置（不含滚动） |
| `pageX`, `pageY`     | 鼠标相对于整个页面的位置（含滚动）     |
| `target`             | 触发事件的 DOM 元素                   |
| `button`             | 鼠标按键（0=左键，1=中间键，2=右键）   |
| `relatedTarget`      | 与 `mouseover`/`mouseout` 相关的元素   |

---

## 🧠 注意事项

- `mouseover` 和 `mouseout` 会**冒泡**，而 `mouseenter` 和 `mouseleave` **不会冒泡**。
- 使用 `event.preventDefault()` 可以阻止某些默认行为（如右键菜单）。
- 在移动端，鼠标事件可能无法完全替代触摸事件（如 `touchstart`、`touchend`）。

---

如果你有具体的使用场景或问题，欢迎告诉我，我可以帮你写出更详细的示例！