Vue中@keydown事件仅点击DIV后触发，如何直接响应ESC键？

问题的核心在于DIV默认不是可聚焦元素，只有当元素获得焦点时，绑定在它身上的键盘事件才会触发。要通过Vue的@keydown实现无需点击页面就能响应ESC键，只需两步：

1. 让DIV成为可聚焦元素 #

给DIV添加tabindex="-1"属性，这样它既能接收焦点，又不会被Tab键遍历到（兼顾无障碍访问需求）。

2. 组件挂载时自动让DIV获得焦点 #

通过Vue的ref获取DOM元素，在onMounted钩子中调用focus()方法，确保页面加载后DIV自动处于聚焦状态。

完整代码示例 #

模板部分：

<div 
  @keydown="handleEscKey($event)"
  tabindex="-1"
  ref="targetDiv"
>
  <!-- 你的组件内容 -->
</div>

脚本部分：

import { ref, onMounted, defineEmits } from 'vue';

const emit = defineEmits(['close']);
const targetDiv = ref<HTMLDivElement | null>(null);

const handleEscKey = (event: KeyboardEvent) => {
  // 仅响应ESC键
  if (event.key === 'Escape') {
    emit('close');
  }
};

onMounted(() => {
  // 挂载后自动让DIV聚焦
  targetDiv.value?.focus();
});

补充说明 #

• 如果你希望DIV能被Tab键选中，可以把tabindex设为0（遵循正常的Tab遍历顺序），但从无障碍角度，-1更适合这种无需用户主动切换焦点的场景。
• 相比全局window监听方案，这种方式的事件作用域更精准，不会和其他组件的键盘事件冲突，更符合Vue组件化的设计理念。

内容的提问来源于stack exchange，提问作者Non404