javascript 锚定 html 元素上的空格键按下不会触发单击事件。怎么让这种事情发生？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6837746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spacebar key press on anchor html element doesn't trigger click event. How to let this happen?
提问by reddyvaribabu
<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"/><span>Save & Add Another</span></a>
I have the above anchor element in my page. This one is styled to look like a button and so will be treated as a button. The problem is as follows. The user doesn't want to use mouse to click on it or reach it, but he will use the tabbing to highlight this anchor element and then will use "spacebar" or "return" keys to click on it. If the user hits on spacebar or return key I should be able to call a JavaScript function. I tried the onkeypress event and that doesn't help. Any idea?
我的页面中有上述锚元素。这个样式看起来像一个按钮，因此将被视为一个按钮。问题如下。用户不想使用鼠标点击它或到达它，但他会使用制表符突出显示这个锚元素，然后使用“空格键”或“返回”键来点击它。如果用户点击空格键或返回键，我应该能够调用 JavaScript 函数。我尝试了 onkeypress 事件，但没有帮助。任何的想法？
回答by Tom
First: there's a problem with your HTML. You're using the short syntax for the A-- meaning that the text isn't actually part of the Acontent. Many browsers don't like the short syntax for Atags anyway -- not your fault, but it's our job to be more tolerant than browsers are.
第一：你的 HTML 有问题。您正在使用 -- 的简短语法，这A意味着文本实际上不是A内容的一部分。A无论如何，许多浏览器不喜欢标签的简短语法——这不是你的错，但我们的工作是比浏览器更宽容。
Here's the corrected version:
这是更正后的版本：
<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"><span>Save & Add Another</span></a>
Depending on the browser and DOCTYPE, it is significant whether the event name is all lowercase or not. Just something to look for.
根据浏览器和 DOCTYPE，事件名称是否全部小写很重要。只是要寻找的东西。
Finally, by default your onclick event will only fire for clicks and Enter -- not for spacebar. Many browsers treat the spacebar as a pagedown thing. If you are sure you want to capture spacebar events on this Aand treat them like Enter, you'll need to define a keypress event that looks for spacebars. Like so:
最后，默认情况下，您的 onclick 事件只会针对点击和 Enter 触发——而不是针对空格键。许多浏览器将空格键视为向下翻页的东西。如果您确定要在此上捕获空格键事件A并将它们视为 Enter，则需要定义一个查找空格键的按键事件。像这样：
function addNewKeys(event) {
if(!event) var event = window.event; // cross-browser shenanigans
if(event.keyCode === 32) { // this is the spacebar
saveTdsAddNew(event);
}
return true; // treat all other keys normally;
}
(Remember to bind this new function to the onkeypress of that A.)
（记得把这个新函数绑定到那个的 onkeypress 上A。）
Note that I'm passing the eventto the saveTdsAddNewfunction. That's because I think event handlers normally receive the eventobject as their argument, so this preserves the existing pattern. From the event, you can retrieve the element that was clicked/keyed-on, etc.
请注意，我将 传递event给saveTdsAddNew函数。那是因为我认为事件处理程序通常接收event对象作为他们的参数，所以这保留了现有的模式。从 中event，您可以检索被单击/键入的元素等。
回答by djlumley
I haven't personally tried to do this, but I wager it's a little more involved then just setting up a keypress event on the hyperlink.
我个人没有尝试过这样做，但我敢打赌，这比在超链接上设置按键事件要复杂一些。
I imagine what you need to do is handle the keypress at document level, within that check to see if your hyperlink is focused, then execute the code you wish.
我想您需要做的是在文档级别处理按键，在该检查中查看您的超链接是否获得焦点，然后执行您希望的代码。
It's also worth seperating the on-click event from the HTML.
将点击事件与 HTML 分开也是值得的。
