如何用全局事件处理器捕获含键盘、无障碍API的类点击元素激活事件

要覆盖所有你提到的激活场景，直接在document上绑定全局事件处理器即可，核心是监听两类事件并过滤目标元素，具体实现如下：

第一步：定义可激活元素的判断逻辑 #

先写一个辅助函数，用来判断触发事件的元素是否属于需要处理的可激活元素：

function isActivableElement(el) {
  // 匹配原生可点击元素（button、a、input等）
  const activableTags = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'];
  if (activableTags.includes(el.tagName)) {
    // 排除已禁用的元素
    if (el.disabled || el.hasAttribute('disabled')) return false;
    // 额外判断a标签：必须带href或tabindex才是可点击的
    if (el.tagName === 'A' && !el.href && el.getAttribute('tabindex') === null) {
      return false;
    }
    return true;
  }
  // 处理设置了有效tabindex的自定义元素（tabindex >= 0）
  const tabindex = el.getAttribute('tabindex');
  return tabindex !== null && !isNaN(tabindex) && parseInt(tabindex) >= 0;
}

第二步：绑定全局事件处理器 #

在document上监听click和keydown事件，覆盖所有激活场景：

// 你提供的全局处理函数
const handleElementActivated = (event) => {
  console.log('now handling an interaction with element', event);
};

// 1. 监听click事件：覆盖鼠标点击、触摸点击、屏幕阅读器无障碍激活
document.addEventListener('click', (event) => {
  if (isActivableElement(event.target)) {
    handleElementActivated(event);
  }
});

// 2. 监听keydown事件：处理Enter/Space键激活获焦元素
document.addEventListener('keydown', (event) => {
  const target = event.target;
  // 判断是否是Enter或Space键，且元素可激活
  if ((event.key === 'Enter' || event.key === ' ') && isActivableElement(target)) {
    // 阻止默认行为，避免和click事件重复触发（比如按Enter会自动触发click）
    event.preventDefault();
    handleElementActivated(event);
  }
});

场景覆盖说明 #

• 鼠标/触摸点击：直接触发click事件，被全局监听捕获
• Enter键激活获焦元素：通过keydown事件监听Enter键，判断元素可激活后触发处理函数
• 屏幕阅读器无障碍激活：绝大多数屏幕阅读器在触发元素激活时，会模拟click事件，因此会被全局click监听捕获；少数场景会模拟键盘事件，也会被keydown监听覆盖

额外注意事项 #

• 动态添加的元素也能被覆盖，因为事件委托是绑定在document上的
• 已禁用的元素会被自动排除，符合交互逻辑
• 对于a标签，额外判断了href或tabindex，避免处理纯占位的无交互a标签

内容的提问来源于stack exchange，提问作者Alex von Brandenfels