无障碍需求下，如何统一处理元素的点击与回车/空格事件？

为实现无障碍访问，我们常需要让元素在鼠标点击、按下回车键或空格键时执行相同操作。比如常见的写法是：

<div @click="doTheThing" @keyup.enter="doTheThing" tabindex="0">Do the Thing</div>

有没有更简洁的方法，不用写多个监听器就能调用同一事件处理器？

最佳实践：优先使用原生可交互元素 #

最推荐的方案是直接用<button>这类原生可交互控件，因为它天生支持无障碍访问：

• 默认自带焦点状态，无需手动加tabindex
• 自动响应回车键和空格键触发点击事件
• 屏幕阅读器能正确识别其可交互属性

代码示例：

<button @click="doTheThing">Do the Thing</button>

这样一行代码就满足所有需求，完全不用额外处理键盘事件，是最符合规范且最简洁的写法。

必须用非交互元素时的优化方案 #

如果因为样式或业务限制必须用<div>这类非原生可交互元素，可以用以下方式简化：

1. Vue中合并键盘事件监听

Vue支持在同一个事件指令中绑定多个修饰符，直接合并回车和空格的键盘监听：

<div 
  @click="doTheThing" 
  @keydown.enter.space.prevent="doTheThing" 
  tabindex="0"
>Do the Thing</div>

用keydown代替keyup能让触发时机更符合用户预期，加上.prevent可以避免空格触发页面滚动的默认行为。

2. 封装自定义指令（Vue）

如果多个元素需要这个功能，封装成自定义指令能彻底避免重复代码：

Vue.directive('clickable', {
  bind(el, binding) {
    const handler = binding.value;
    // 绑定点击事件
    el.addEventListener('click', handler);
    // 绑定键盘事件
    el.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handler(e);
      }
    });
    // 设置可聚焦
    el.setAttribute('tabindex', '0');
  },
  // 解绑事件避免内存泄漏
  unbind(el, binding) {
    const handler = binding.value;
    el.removeEventListener('click', handler);
    el.removeEventListener('keydown', handler);
  }
});

使用时只需一行：

<div v-clickable="doTheThing">Do the Thing</div>

3. 原生JS统一事件处理

原生环境下，可以把点击和键盘事件绑定到同一个处理器函数：

const targetEl = document.querySelector('.interactive-div');
targetEl.setAttribute('tabindex', '0');

function handleAction(e) {
  // 判断事件类型或按键
  if (e.type === 'click' || 
      (e.type === 'keydown' && (e.key === 'Enter' || e.key === ' '))) {
    e.preventDefault();
    doTheThing();
  }
}

// 绑定同一个处理器
targetEl.addEventListener('click', handleAction);
targetEl.addEventListener('keydown', handleAction);

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