如何让Font Awesome点赞/点踩图标支持按Enter键触发点击功能

<i> 标签本身是非交互元素，即便添加了 tabindex="0" 支持聚焦，默认也不会将回车、空格键映射为点击事件，这是当前配置失效的核心原因。之前包裹 <button>/<a> 未生效，大概率是事件绑定位置错误、或者动态元素绑定时机不对导致的，以下是两个可行解决方案：

方案1：使用原生button标签（最符合可访问性规范，无需额外键盘事件处理） #

原生button默认支持回车、空格触发点击，自带标准可访问性属性，不需要手动做兼容，是最优选择。之前写法失效通常是两个问题：要么点击事件绑在了内部的i标签上，没绑到button上；要么没有清除button的默认样式导致视觉异常。
示例代码如下：

<button 
  id="heartBTN-${data.date}"
  class="heart-btn p-0 border-0 bg-transparent"
  aria-label="点赞内容"
  title="我喜欢"
>
  <i class="fas fa-heart hidden heart fa-lg p-1 my-1 mr-3">
    <span class="likeSpan likeSpan${data.date}">点赞</span>
  </i>
</button>

注意事项：

• 点击事件直接绑定在 <button> 元素上，不要绑定到内部的i标签
• 配合Bootstrap的border-0 bg-transparent p-0类可以完全清除button的默认样式，视觉上和之前的i标签完全一致
• 不需要手动加tabindex，原生button默认支持聚焦

方案2：保留现有i标签结构，手动添加键盘事件监听 #

如果不想修改DOM结构，你可以给i标签补充ARIA标识，同时监听键盘事件手动触发点击逻辑：
首先给i标签补充role="button"属性，告诉屏幕阅读器这是一个按钮控件：

<i
  id="heartBTN-${data.date}"
  class="fas fa-heart hidden heart fa-lg p-1 my-1 mr-3"
  tabindex="0"
  role="button"
  aria-label="点赞内容"
  title="我喜欢"
  ><span class="likeSpan likeSpan${data.date}">Like Me</span></i
>

然后添加对应的JS事件监听，动态渲染的元素建议用事件委托绑定，避免渲染时机导致的绑定失效：

// 事件委托绑定到页面已存在的父元素，比如你放卡片的容器
document.querySelector('#card-container').addEventListener('keydown', (e) => {
  // 匹配你的点赞i标签
  if (e.target.classList.contains('heart')) {
    // 按下回车或者空格键时触发点击逻辑
    if (e.key === 'Enter' || e.key === ' ') {
      // 阻止默认滚动行为（按空格默认会滚动页面）
      e.preventDefault();
      // 触发你之前写的点赞逻辑，或者直接调用click()
      e.target.click();
    }
  }
})

常见踩坑说明 #

• 动态渲染的元素不要直接用document.querySelector('.heart').addEventListener绑定，要绑定到页面加载时就存在的父容器上做事件委托，否则元素还没渲染到DOM里，绑定会失效
• 如果之前包裹a标签失效，要检查a标签是否加了href="javascript:void(0)"或者阻止了默认跳转，同时事件绑在a标签而非内部i标签上

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