非按钮可聚焦可点击元素模拟按钮回车/空格触发行为的内置方法

目前没有浏览器原生内置的机制，能让非按钮元素自动实现回车、空格键触发点击的行为——这套键盘交互逻辑是浏览器专为<button>、<input type="button">这类原生表单控件默认提供的。

如果你不想编写keydown事件监听器，有两个可行的替代方向：

• 直接使用<button>元素，通过CSS重置默认样式，改成你需要的外观。这是最符合无障碍标准的方案，原生就支持所有按钮的键盘交互逻辑，不需要额外写任何脚本。
• 给目标元素添加role="button"属性，不过这个属性只是告诉屏幕阅读器等辅助技术该元素扮演按钮角色，并不会自动绑定键盘事件，想要实现回车/空格触发点击，还是得配合事件监听器才行。

简单来说，最省心的方案是用原生按钮改样式；如果必须使用非按钮元素，那绕不开事件监听器来处理键盘触发逻辑。

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