在Vue中如何为非输入元素绑定回车事件，支持失焦时也能触发？

原写法不生效的原因 #

• 键盘事件默认仅能被当前处于聚焦状态的可交互元素（输入框、按钮等）捕获，普通元素、自定义组件默认不支持聚焦，因此绑定在元素自身的keyup事件不会触发
• 要求失焦状态也能触发事件，说明该回车事件属于全局级交互，绑定到组件本身无法满足需求，需要绑定到全局window对象上

实现方案 #

全局监听（满足失焦也能触发的要求） #

Vue 2 写法

<template>
  <someComponent @click="handleConfirm" />
</template>

<script>
export default {
  methods: {
    handleConfirm() {
      console.log("works") 
    },
    handleGlobalEnter(event) {
      // 可在这里加额外判断条件，比如仅弹窗打开时触发，避免全局冲突
      if (event.key === 'Enter') {
        this.handleConfirm()
      }
    }
  },
  mounted() {
    window.addEventListener('keyup', this.handleGlobalEnter)
  },
  // 组件卸载前必须移除监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener('keyup', this.handleGlobalEnter)
  }
}
</script>

Vue 3 组合式API写法

<template>
  <someComponent @click="handleConfirm" />
</template>

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

const handleConfirm = () => {
  console.log("works") 
}

const handleGlobalEnter = (event) => {
  if (event.key === 'Enter') {
    handleConfirm()
  }
}

onMounted(() => {
  window.addEventListener('keyup', handleGlobalEnter)
})

onUnmounted(() => {
  window.removeEventListener('keyup', handleGlobalEnter)
})
</script>

仅元素聚焦时触发（无需失焦触发的场景） #

如果不需要失焦触发，只需要给元素添加tabindex="0"属性，让元素变成可聚焦元素即可，写法如下：

<someComponent @keyup.enter="handleConfirm" tabindex="0" />

注意事项 #

• 全局监听回车事件会在所有页面场景生效，建议添加业务判断条件（比如仅当前组件对应的模块可见时才执行逻辑），避免和其他全局回车事件冲突
• 全局事件监听必须在组件卸载时移除，否则会造成内存泄漏

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