为分页按钮添加空格键触发点击事件的实现问题

我明白你遇到的困扰了——带role="button"的分页链接能通过Tab键聚焦、回车键触发跳转，但空格键就是没反应，试了代码能弹出alert却触发不了点击，确实挺折腾人的。

先帮你分析下之前代码的问题：

1. keypress事件的局限性：这个事件在不同浏览器里对空格键的支持不一致，而且它主要针对字符输入类按键，对于空格键这类功能键，用keydown或者keyup会更可靠。
2. trigger('click')的坑：jQuery的trigger('click')只会触发通过jQuery绑定的点击事件处理器，不一定能触发a标签原生的跳转行为。这就是为什么你能看到alert，但页面没跳转的核心原因。
3. 默认行为没及时阻止：空格键的默认行为是让页面向下滚动，如果你没在事件触发第一时间阻止，可能会干扰后续的点击模拟逻辑。

给你两个靠谱的解决方案，按需选择：

方案一：用原生DOM的click()方法模拟点击 #

这个方法能完整模拟用户点击a标签的行为，既会触发自定义的点击事件，也会触发原生跳转：

$(document).on('keydown', 'a.page-numbers[role="button"]', function(e) {
    // 匹配空格键（keyCode 32，也可以用e.key === ' '）
    if (e.keyCode === 32) {
        e.preventDefault(); // 阻止页面滚动的默认行为
        this.click(); // 调用原生DOM的click方法，而非jQuery的trigger
    }
});

方案二：直接跳转href（更直接稳妥） #

如果方案一还是没效果，可能是你的分页链接有特殊的事件绑定逻辑，直接读取href跳转最稳妥：

$(document).on('keydown', 'a.page-numbers[role="button"]', function(e) {
    if (e.keyCode === 32) {
        e.preventDefault();
        window.location.href = this.href;
    }
});

另外你提到的:focus状态其实不用额外处理，因为keydown事件只有当元素处于聚焦状态时才会触发（你已经能通过Tab键聚焦到按钮上了），所以绑定事件到元素本身就足够。

内容来源于stack exchange