如何使用回车键使字体很棒（喜欢/不喜欢）图标可点击？

Question

我有一张引导卡，其中包含来自 API 的信息。在我的 JS 文件中，我将卡动态渲染到我的 HTML 文件中。 现在我正在尝试通过使用enter key使其可点击来使图标可访问，但我无法让它工作。

我尝试将i标签包装在一个按钮中，但没有用。 我还尝试将它包装在a标签中并添加一个href但这也没有用。 有没有人有任何想法或知道该怎么做？

在下面的代码中，您将看到我添加了tabindex=0属性，该属性至少允许用户使用 select i标签，但无助于使用enter键使其可点击。

 <i id="heartBTN-${data.date}" class="fas fa-heart hidden heart fa-lg p-1 my-1 mr-3" tabindex="0" aria-label="like content" title="I like it" ><span class="likeSpan likeSpan${data.date}">Like Me</span></i >

Answer 1

您可以执行类似的操作，但由于查询选择器是body ，因此每当有人在页面中按下 Enter 键时，它都会触发触发器。

document.querySelector('body').addEventListener('keypress', function (e) 
{
    if (e.key === 'Enter') {
      // triggering the click
      $('.fa-heart').click();
    }
});

推荐的方法是将事件侦听器绑定到输入字段。 像document.querySelector('#myInputField').addEventListener