鼠标|键盘事件

在 Vue 中，@click 代表点击事件（单击）。对于双击、右击等其它鼠标操作，Vue 提供了对原生 DOM 事件的支持，你可以直接使用标准的 HTML DOM 事件名称，以下是一些常用事件：

---

鼠标相关的事件

1. 单击事件 (click)

   <button @click="handleClick">单击我</button>
   

2. 双击事件 (dblclick)

   <button @dblclick="handleDoubleClick">双击我</button>
   

3. 右键点击事件 (contextmenu)

   <div @contextmenu.prevent="handleRightClick">右击我</div>
   

   • .prevent 修饰符可以阻止默认的右键菜单弹出。

4. 鼠标按下事件 (mousedown)

   <div @mousedown="handleMouseDown">鼠标按下</div>
   

5. 鼠标松开事件 (mouseup)

   <div @mouseup="handleMouseUp">鼠标松开</div>
   

6. 鼠标移入事件 (mouseenter)

   <div @mouseenter="handleMouseEnter">鼠标移入</div>
   

7. 鼠标移出事件 (mouseleave)

   <div @mouseleave="handleMouseLeave">鼠标移出</div>
   

8. 鼠标移动事件 (mousemove)

   <div @mousemove="handleMouseMove">鼠标移动</div>
   

9. 鼠标滚轮事件 (wheel)

   <div @wheel="handleMouseWheel">鼠标滚轮</div>
   

---

键盘相关的事件

1. 按键按下事件 (keydown)

   <input @keydown="handleKeyDown" placeholder="按下任意键">
   

2. 按键弹起事件 (keyup)

   <input @keyup="handleKeyUp" placeholder="按下并松开键">
   

3. 按键按住事件 (keypress)

   ⚠️ 注意：keypress 在现代浏览器中已经废弃，建议使用 keydown。

---

常用修饰符

Vue 提供了一些修饰符，用于简化事件处理逻辑：

1. .prevent：阻止默认事件行为

   <a href="https://example.com" @click.prevent="handleClick">阻止跳转</a>
   

2. .stop：阻止事件冒泡

   <div @click="handleParentClick">
     <button @click.stop="handleChildClick">点击我不会触发父级事件</button>
   </div>
   

3. .capture：使用捕获模式

   <div @click.capture="handleCaptureClick">捕获模式点击</div>
   

4. .self：仅当事件发生在自身时触发

   <div @click.self="handleClick">点击我之外的区域不会触发</div>
   

5. .once：事件只触发一次

   <button @click.once="handleClick">只触发一次</button>
   

6. .native：监听组件根元素的原生事件

   <custom-component @click.native="handleNativeClick"></custom-component>
   

---

组合键和特殊按键

对于键盘事件，Vue 提供了修饰符来简化按键监听：

<!-- 检测按下 "Enter" 键 -->
<input @keyup.enter="handleEnter" placeholder="按下 Enter 键">

<!-- 检测按下 "Ctrl + S" -->
<div @keydown.ctrl.s="handleSave">按下 Ctrl + S 保存</div>

<!-- 支持其他键 -->
<div @keydown.esc="handleEscape">按下 Escape 键</div>

---

完整示例

<template>
  <div>
    <button @click="handleClick">单击</button>
    <button @dblclick="handleDoubleClick">双击</button>
    <div @contextmenu.prevent="handleRightClick">右击我</div>
    <input @keyup.enter="handleEnter" placeholder="按下 Enter">
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert("单击事件触发");
    },
    handleDoubleClick() {
      alert("双击事件触发");
    },
    handleRightClick() {
      alert("右键事件触发");
    },
    handleEnter() {
      alert("按下 Enter 键");
    },
  },
};
</script>

---

总结

• 单击：@click
• 双击：@dblclick
• 右击：@contextmenu
• 鼠标相关事件如 mousedown、mouseup、mouseenter 等都可以直接使用。
• 键盘事件支持 @keydown、@keyup，并可以结合修饰符使用。