javascript 空格键触发复选框上的点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27878940/
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 triggering click event on checkbox?
提问by Sebas
If you spacebar on a checkbox, it checks the box. Everything was fine until I decide to disable the click event on the parent div, which I realized, disabled the spacebar on the checkbox as well!
如果在复选框上使用空格键，它会选中该框。一切都很好，直到我决定禁用父 div 上的点击事件，我意识到，也禁用了复选框上的空格键！
div1.addEventListener("click",function (e) {
if (e.preventDefault) e.preventDefault();
e.cancelBubble = true;
return false;
}, true);<div id="div1">
<input id="chk1" type="checkbox">
</div>http://jsfiddle.net/0t01252x/1/
http://jsfiddle.net/0t01252x/1/
How can I prevent that? It seems like a very odd behaviour to me. Click events are click events, not keyboard events...
我怎样才能防止这种情况？对我来说，这似乎是一种非常奇怪的行为。单击事件是单击事件，而不是键盘事件...
Note: tested with chrome and FF
注意：用铬和 FF 测试
Edit: worst: outputing the event in the console gives a ... MouseEvent!
编辑：最糟糕的是：在控制台中输出事件会产生... MouseEvent！
采纳答案by Josh Crozier
Quirksmode - click, mousedown, mouseup, dblclick
The click event fires when the user clicks on an element OR activates an element by other means (i.e. the keyboard)... “click” event is really a misnomer: it should be called the “activate” event.
Quirksmode - 单击、鼠标按下、鼠标抬起、dblclick
当用户点击一个元素或通过其他方式（即键盘）激活一个元素时，click 事件会触发……“click”事件确实是用词不当：它应该被称为“activate”事件。
To work around this, you can attach a clickandkeyupevent to the checkbox.
为了解决这个问题，您可以附加click和keyup事件的复选框。
checkbox.addEventListener("click", handleCheckboxEvent, true);
checkbox.addEventListener("keyup", handleCheckboxEvent, true);
Listen to both events, and always disable the default behavior. From there, you can determine if the spacebar fired a keyupevent if the key 32is pressed (e.keyCode === 32).
侦听这两个事件，并始终禁用默认行为。从那里，您可以确定空格键keyup是否在32按下键时触发事件( e.keyCode === 32)。
If so, manually check the checkbox if it is notchecked, and uncheck it if it ischecked.
如果是这样，手动检查复选框，如果它是不检查，取消它，如果它被选中。
function handleCheckboxEvent(e) {
e.preventDefault();
if (e.keyCode === 32) { // If spacebar fired the event
this.checked = !this.checked;
}
}
Updated Example- tested in the latest versions of Chrome/FF/IE.
更新示例- 在最新版本的 Chrome/FF/IE 中测试。
(function () {
var checkbox = document.getElementById('checkbox');
function handleCheckboxEvent(e) {
e.preventDefault();
if (e.keyCode === 32) { // If spacebar fired the event
this.checked = !this.checked;
}
}
checkbox.addEventListener("click", handleCheckboxEvent, true);
checkbox.addEventListener("keyup", handleCheckboxEvent, true);
})();<input id="checkbox" type="checkbox" />回答by jmore009
Kaiido seems to have a good solution. As for the behavior this is apparently expected. According to:
Kaiido 似乎有一个很好的解决方案。至于行为，这显然是预料之中的。根据：
W3C - SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons
W3C - SCR35：通过使用锚点和按钮的 onclick 事件使操作键盘可访问
the onclickevent is triggered by the keyboard for accessibility purposes. Browsers use the click event even if its triggered from the keyboard in the event that a mouse isnt present:
onclick出于可访问性目的，该事件由键盘触发。即使在鼠标不存在的情况下从键盘触发，浏览器也会使用 click 事件：
While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
虽然“onclick”听起来像是绑定到鼠标，但 onclick 事件实际上映射到链接或按钮的默认操作。默认操作发生在用户用鼠标单击元素时，但也发生在用户聚焦元素并点击 Enter 或空格时，以及通过辅助功能 API 触发元素时。
