Vue 模板中监听鼠标按下事件需使用 @mousedown（而非 @mouse-down），这是因 Vue 事件修饰符严格遵循原生 DOM 事件命名规范；本文详解正确写法、按键区分技巧及实际开发注意事项。
vue 模板中监听鼠标按下事件需使用 `@mousedown`（而非 `@mouse-down`），这是因 vue 事件修饰符严格遵循原生 dom 事件命名规范；本文详解正确写法、按键区分技巧及实际开发注意事项。
在 Vue 开发中，初学者常误将原生 DOM 事件名按连字符风格书写（如 mouse-down），但 Vue 的事件监听器直接映射浏览器原生事件，而标准 DOM 事件名为 mousedown、mouseup、click 等——全部为小驼峰或全小写无连字符形式。因此，@mouse-down 是无效的，Vue 不会识别该事件，导致回调函数完全不触发。
✅ 正确写法如下：
<template>
<button @mousedown="onMouseDown">按下计数</button>
<p>已触发 {{ downCount }} 次鼠标按下</p>
</template>
<script>
export default {
data() {
return {
downCount: 0,
}
},
methods: {
onMouseDown(event) {
this.downCount++
console.log('鼠标按下，按钮：', event.button) // 0=左键, 1=中键, 2=右键
}
}
}
</script>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
@mousedown 默认响应所有鼠标按键（左键、中键、右键均触发），若仅需监听左键（最常见场景），应添加 .left 修饰符：
<button @mousedown.left="onLeftDown">仅左键按下</button>
同理，可使用 .right 或 .middle 限定按键类型。
避免与 @click 混淆：
mousedown 在鼠标按键按下的瞬间触发（即使未松开）；
click 则需完成“按下 + 松开”且未发生拖动才算一次点击；
因此实现长按或双击检测时，mousedown 是更底层、更可控的起点。-
补充建议（进阶实践）：
若需构建双击/长按逻辑，推荐在 mousedown 中启动定时器，在 mouseup 中清除或执行判定，同时注意 mouseleave 场景下及时清理定时器防止内存泄漏。例如：methods: { onMouseDown() { this.pressTimer = setTimeout(() => { this.isLongPress = true console.log('长按触发') }, 500) }, onMouseUp() { clearTimeout(this.pressTimer) if (!this.isLongPress) { // 可在此扩展单击/双击逻辑 } this.isLongPress = false } }
总结：牢记 Vue 事件名 = 原生 DOM 事件名（无连字符、全小写），善用 .left 等修饰符提升精确性，并结合 mouseup、mouseleave 等事件协同设计交互逻辑——无需第三方库，即可稳健实现自定义鼠标行为。
