Vue中@keydown事件无法触发问题求助

DevOps 小满

2026-6-21

问题解决：Vue中@keydown事件不触发的原因及修复方案

问题根源

普通<div>元素默认不具备焦点能力，键盘事件（如keydown）只有在元素处于聚焦状态时才会触发。而@click事件不需要元素聚焦，只要点击交互就会触发，所以你能看到点击正常但键盘事件失效的现象。

解决方案一：让div可聚焦

给<div>添加tabindex属性，使其能够获取焦点，这样点击div或通过Tab键切换聚焦后，键盘事件就能正常触发：

<template>
  <div class="container" tabindex="0" @keydown="handleKeyDown">
    <h1>Hello</h1>
  </div>
</template>

<script setup>
const handleKeyDown = () => {
  console.log('pressed')
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}

/* 可选：移除聚焦时的默认边框，优化视觉体验 */
.container:focus {
  outline: none;
}
</style>

解决方案二：全局监听键盘事件

如果你需要在页面任何位置按键都触发事件，可以直接给window添加全局键盘监听，适合全局快捷键场景：

<template>
  <div class="container">
    <h1>Hello</h1>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'

const handleKeyDown = () => {
  console.log('pressed')
}

// 组件挂载时添加监听
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown)
})

// 组件卸载时移除监听，避免内存泄漏
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>