按下空格键点击按钮

Question

我有一个带有锚点的按钮，为了提高可访问性，我希望能够用空格键触发它。但是，当按钮处于焦点状态时，点击空格键会使页面向下跳转，而不是触发按钮。

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

我曾尝试过咬下空格键：

window.onkeydown = function(e) { 
  return !(e.keyCode == 32);
};

但是我不希望这样。我不确定将空格键映射到回车键是否是一个明智的解决方案，或者它是否可行。如何使用纯JS用空格键触发按钮？

- bruh

---

提醒一下，HTML5中已经弃用了使用<a>作为锚点的方式。在HTML 4.01中，<a>标签可以是超链接或锚点。在HTML5中，<a>标签始终是超链接，但如果没有href属性，则仅作为超链接的占位符。 - racecarjonathan

Answer 1

您可能需要考虑防止默认解决方案：

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

这将阻止空格键执行默认操作（发送空格），然后您可以在该函数内部添加滚动命令。

- fouroh4

---

太好了。只需将 document.querySelector('a') 更改为 document.querySelector('a.myClassName') - 否则会选中文档中的第一个元素。感谢快速回应，留待后来者参考！ - bruh

@fouroh4 不是啊，哈哈，如果我没记错的话应该以 }; 结尾吧？ - brandito

Answer 2

给你的链接添加一个id，然后尝试以下内容：

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

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

- Ashton French

---

这正是我所需要的。只需将document.onkeydown更改为link.onkeydown，以确保我仅针对该元素进行操作。谢谢！ - bruh