vue 模板中监听鼠标按下事件需使用 @mousedown（而非 @mouse-down），这是因 Vue 事件修饰符严格遵循 dom 原生事件命名规范；同时建议配合 .left 等修饰符精准控制触发条件，避免误响应中键/右键操作。
vue 模板中监听鼠标按下事件需使用 `@mousedown`（而非 `@mouse-down`），这是因 vue 事件修饰符严格遵循 dom 原生事件命名规范；同时建议配合 `.left` 等修饰符精准控制触发条件，避免误响应中键/右键操作。
在 Vue 开发中，事件绑定是基础但易出错的环节。初学者常误将 DOM 事件名按连字符格式书写（如 @mouse-down），而 Vue 的事件监听器直接映射原生 DOM 事件，必须使用小驼峰式或全小写的标准事件名：mousedown、mouseup、click、dblclick 等——注意它们中间无连字符。
以下是你原始代码的问题定位与修正方案：
✅ 正确写法（修复事件名）：
<template> <button @mousedown="greet">Greet {{ counter }}</button> </template>⚠️ 但需注意：@mousedown 默认响应所有鼠标按键（左键、中键、右键均会触发）。若仅需监听左键按下（最常见场景），应添加 .left 修饰符：
立即学习“前端免费学习笔记（深入）”；
<template> <button @mousedown.left="greet">Greet {{ counter }}</button> </template>同理，你也可使用：
- @mousedown.right → 仅右键按下时触发
- @mousedown.middle → 仅中键（滚轮点击）按下时触发
? 补充说明：
- @dblclick 同样有效，但需确保未被 @mousedown / @mouseup 的逻辑意外阻止（例如 Event.preventDefault() 或过早 return）；
- 实现长按（long press）或双击（double-click）检测时，推荐用 mousedown + setTimeout + mouseup 组合自主控制，而非依赖原生 @dblclick（因其触发时机和兼容性受限）；
✅ 完整可运行示例（含长按检测雏形）：
<script setup> import { ref, onBeforeUnmount } from 'vue' const counter = ref(0) let pressTimer = null const handleMouseDown = () => { counter.value = 1 pressTimer = setTimeout(() => { counter.value = 3 // 长按生效 }, 800) } const handleMouseUp = () => { if (pressTimer) { clearTimeout(pressTimer) pressTimer = null } if (counter.value === 1) { counter.value = 2 // 短按完成 } } </script> <template> <button @mousedown.left="handleMouseDown" @mouseup.left="handleMouseUp" @mouseleave="handleMouseUp" > State: {{ ['idle', 'pressed', 'clicked', 'long-pressed'][counter] }} </button> </template>? 总结提醒：
- Vue 事件名 = 原生 DOM 事件名（全小写，无连字符），如 @input、@submit、@keydown；
- 修饰符（.left, .prevent, .stop）可链式组合，提升语义与健壮性；
- 对于复杂交互逻辑（如长按、双击、拖拽），优先封装为可复用的组合式函数（Composable），而非在模板中堆砌逻辑。
掌握这一底层约定，将显著提升事件处理的准确性与可维护性。