Javascript 用空格键单击按钮

Javascript 用空格键单击按钮,javascript,html,Javascript,Html,我有一个带有锚的按钮,出于可访问性的原因,我想用空格键触发它。相反,当按钮处于焦点时,单击空格键将向下跳转页面 <a href="stackoverflow.com">Go to Stack Overflow</a> 但这当然不是我想要的。我不确定将空格键映射到enter键是否是一个智能解决方案,或者是否可能。如何使用纯JS使用空格键触发按钮?您可能需要研究一种防止默认解决方案: window.onkeydown = function(event){ if(ev

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

<a href="stackoverflow.com">Go to Stack Overflow</a>

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

您可能需要研究一种防止默认解决方案:

window.onkeydown = function(event){
    if(event.keyCode === 32) {
        event.preventDefault();
        document.querySelector('a').click(); //This will trigger a click on the first <a> element.
    }
};
window.onkeydown=函数(事件){
如果(event.keyCode===32){
event.preventDefault();
document.querySelector('a')。click();//这将触发对第一个元素的单击。
}
};

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

给a链接一个id,然后尝试以下操作:

var link = document.getElementById("link");

document.onkeydown = function (e) {
    if (e.keyCode == 32) {
        link.click();
    }
};

在HTML5中,使用
作为锚定已经被弃用。在HTML4.01中,
标记可以是超链接或锚定。在HTML5中,
标记始终是一个超链接,但如果它没有
href
属性,它只是超链接的占位符。这正是我所需要的。刚刚将document.onkeydown更改为link.onkeydown,以确保我只针对元素。谢谢完美的刚刚将document.querySelector('a')更改为document.querySelector('a.myClassName')——否则将以文档中的第一个元素为目标。为了未来的读者!谢谢你的快速回复response@fouroh4嗯,不,不是lol,应该以}结尾;如果我是对的话?
var link = document.getElementById("link");

document.onkeydown = function (e) {
    if (e.keyCode == 32) {
        link.click();
    }
};