Javascript 空格键触发点击事件复选框？

如果在复选框上添加空格键，它将选中该复选框。一切都很好，直到我决定禁用父div上的click事件，我意识到这也禁用了复选框上的空格键

div1.addEventListener（“单击”），函数（e）{
如果（e.preventDefault）e.preventDefault（）；
e、 取消气泡=真；
返回false；
}，对）
Kaido似乎有一个很好的解决方案。至于这种行为，这显然是意料之中的。根据：


出于可访问性的目的，
onclick
事件由键盘触发。浏览器使用“单击”事件，即使在鼠标不存在的情况下从键盘触发该事件：

虽然“onclick”听起来像是绑定到鼠标，但onclick事件
实际上映射到链接或按钮的默认操作。这个
当用户用鼠标单击元素时，会发生默认操作，
但是当用户聚焦元素并点击enter或
当元素通过可访问性API触发时


当用户单击某个元素或通过其他方式激活某个元素时（即键盘），将触发单击事件。。。“点击”事件实际上是一个误称：它应该被称为“激活”事件

要解决此问题，您可以将
单击
和
键控
事件附加到复选框

checkbox.addEventListener("click", handleCheckboxEvent, true);
checkbox.addEventListener("keyup", handleCheckboxEvent, true);

侦听这两个事件，并始终禁用默认行为。从那里，您可以确定如果按下键
32
（
e.keyCode==32
），空格键是否触发了
keyup
事件

如果是，请手动选中复选框（如果未选中），如果已选中，则取消选中复选框（如果已选中）

function handleCheckboxEvent(e) {
    e.preventDefault();

    if (e.keyCode === 32) {  // If spacebar fired the event
        this.checked = !this.checked;
    }
}

-在最新版本的Chrome/FF/IE中测试


（函数（）{
var checkbox=document.getElementById（'checkbox'）；
功能手柄检查盒通风口（e）{
e、 预防默认值（）；
如果（e.keyCode===32）{//如果空格键触发了事件
this.checked=！this.checked；
}
}
复选框.addEventListener（“单击”，HandleCheckBox，true）；
复选框.addEventListener（“keyup”，HandleCheckBox，true）；
})();
你在寻找什么样的行为？我和你在一起，我没有料到。也许浏览器供应商认为这是个好主意？比如，当他们将键盘最右边的
[enter]
键的keycode更改为与靠近中心的键相同时。@jmore009，键盘事件不应被禁用，只允许单击事件为什么允许空格键，但不允许单击？提出了一个错误，我真的很想听听开发人员对此的看法。等等，不，我不相信！开发人员的可访问性如何？不，更严重的是，他们必须采取不同的做法。至少，不要给我一个
MouseEvent
。是的，我同意，他们至少可以将该事件注册为键盘事件，然后您可以轻松禁用点击。如果您认为解决方案足够好，您可以将其包括在内，我将删除我自己的答案，您的答案是better@Kaiido问题是你的建议行得通没错，但这是一个骗局。我也发现了它，但我认为它使用起来不安全，因为它不在规范中，看起来有点“肮脏狡猾”@jmore009找到了一种方法：）好的，那么您正在手动重写内置行为。在某种程度上，我相信这是一个可以接受的解决方法。。。