单击带有空格键的按钮

bru*_*ruh 4 html javascript

我有一个带有锚点的按钮,出于可访问性的原因,我想用空格键触发它。相反,当按钮处于焦点时,单击空格键会向下跳转页面。

<a href="stackoverflow.com">Go to Stack Overflow</a>
Run Code Online (Sandbox Code Playgroud)

我试过吃空格键:

window.onkeydown = function(e) { 
  return !(e.keyCode == 32);
};
Run Code Online (Sandbox Code Playgroud)

但这当然不是我想要的。我不确定将空格键映射到回车键是否是一个聪明的解决方案,或者是否可能。如何使用纯 JS 用空格键触发按钮?

小智 7

您可能想研究一个防止默认解决方案:

window.onkeydown = function(event){
    if(event.keyCode === 32) {
        event.preventDefault();
        document.querySelector('a').click(); //This will trigger a click on the first <a> element.
    }
};
Run Code Online (Sandbox Code Playgroud)

这将阻止空格键执行默认操作(发送空格),然后您可以将滚动添加到函数内部的命令下方。