如何用jQuery让页面中所有响应点击的元素支持回车和空格键？

可行，但需要合理筛选目标元素，避免对不需要键盘交互的元素造成干扰。以下是具体实现思路和代码：

核心思路 #

1. 排除原生可交互元素：button、带href的a、input、select等原生控件本身已支持回车/空格触发，无需额外处理。
2. 筛选目标元素：找出两类非原生元素：
   • 绑定了click事件（包括通过JS绑定或onclick属性）的元素
   • 设置了tabindex、能获取键盘焦点的元素
3. 绑定键盘事件：为筛选出的元素监听keydown事件，触发回车（Enter）或空格（Space）时模拟点击行为，并阻止空格的默认滚动行为。

jQuery实现示例 #

// 筛选符合条件的非原生可点击元素
const targetElements = $('*').not('button, a[href], input, select, textarea, summary, [role="button"], [role="link"]')
  .filter(function() {
    // 检查是否有click事件绑定或tabindex属性
    const hasClickHandler = $(this).data('events')?.click?.length > 0 || typeof $(this).attr('onclick') === 'string';
    const hasTabindex = $(this).attr('tabindex') !== undefined;
    return hasClickHandler || hasTabindex;
  });

// 绑定键盘触发逻辑
targetElements.on('keydown', function(e) {
  if (e.keyCode === 13 || e.keyCode === 32) {
    e.preventDefault(); // 阻止空格默认滚动
    $(this).trigger('click'); // 触发原有点击逻辑
  }
});

原生JavaScript实现示例 #

// 定义需要排除的原生可交互标签
const nativeInteractiveTags = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA', 'SUMMARY'];
const targetElements = [];

// 遍历所有元素筛选目标
document.querySelectorAll('*').forEach(el => {
  // 排除原生控件和已声明角色的元素
  if (nativeInteractiveTags.includes(el.tagName) 
      || el.getAttribute('role') === 'button' 
      || el.getAttribute('role') === 'link') {
    return;
  }

  // 筛选有click事件或tabindex的元素
  const hasOnclick = el.onclick !== null;
  const hasTabindex = el.getAttribute('tabindex') !== null;
  if (hasOnclick || hasTabindex) {
    targetElements.push(el);
  }
});

// 为目标元素添加键盘支持
targetElements.forEach(el => {
  // 自动添加tabindex确保能获取焦点（如果没有的话）
  if (!el.getAttribute('tabindex')) {
    el.setAttribute('tabindex', '0');
  }

  el.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      this.click();
    }
  });
});

注意事项 #

• 动态元素适配：如果页面存在动态加载的元素，需要在元素加载完成后重新执行筛选逻辑，或改用事件委托的方式绑定键盘事件。
• 误判规避：部分元素的click事件可能仅用于内部逻辑，不需要键盘交互。若需更精准控制，可约定特定类名（如keyboard-accessible）作为筛选标识。
• 无障碍补充：虽然你提到角色无关，但从无障碍最佳实践出发，建议给这类元素添加role="button"或对应角色，让屏幕阅读器用户更清晰地理解元素功能。

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