Javascript 如何使用role="；制作我的div；按钮“；可使用enter键单击的属性

我有一个应用程序，需要完全通过键盘导航。当我单击div的头（由javascript/jquery函数生成）时，会触发一个事件侦听器。通过添加属性

role=“button”

和

tabindex=“0”

，我可以用

tab

突出显示标题，但仍然只能通过鼠标单击。ARIA文档有点难以理解，我没有多少时间了

HTML

Javascript/Jquery：

function handleHeaderClick() {
  $('#js-item-root').on('click', '.js-item-header', function(event) {
    event.preventDefault();

    console.log(this.id)
  }
}

当我用

tab

键突出显示标题并按

enter

时，如何使console.log工作

//Progress update detailed below

---

我用

s换

s并将宽度设置为

width:100%

，从而使代码正常工作，但我仍然想学习一种使div像按钮一样工作的方法。我尝试创建一个新函数，该函数将

'click'

切换为

'keypress'

，但没有成功。还有什么我遗漏的吗？

提示：在这些元素上还需要一个键事件监听器，并检查使用了哪个键我已经尝试了“$（'#js item root'）.on（'keypress'，'.js item header'，function（event）{event.preventDefault（）；console.log（this.id）}”，但该属性仍然不起作用。好的，这应该可以。但你的问题是关于键的，所以你也需要一个键事件侦听器…比如

。在（'keydown'）上，

无论是'keypress'还是'keydown'都不起作用创建一个可运行的演示，显示你尝试的内容，并且比“不起作用”更具体一些。任何错误，实际发生的情况等？提示：在这些元素上还需要一个键事件侦听器，并检查使用了哪个键。我已经尝试了“$（'#js item root'）。在（'keypress'，'.js item header'，函数（event）{event.preventDefault（）；console.log（this.id）}”，但该属性仍然不起作用。好的，这应该可以。但你的问题是关于键的，所以你也需要一个键事件侦听器…比如

。在（'keydown'）上，

无论是'keypress'还是'keydown'都不起作用创建一个可运行的演示，显示你尝试的内容，并且比“不起作用”更具体一些.是否有任何错误，实际发生了什么等？

function handleHeaderClick() {
  $('#js-item-root').on('click', '.js-item-header', function(event) {
    event.preventDefault();

    console.log(this.id)
  }
}

//Progress update detailed below