Question

如果您选中复选框上的空格键，则会选中该复选框。一切都很好，直到我决定禁用父div上的click事件，我意识到，禁用了复选框上的空格键！

＆＃13;

div1.addEventListener("click",function (e) {
  if (e.preventDefault) e.preventDefault();
  e.cancelBubble = true;
  return false;
}, true);

＆＃13;

<div id="div1">
    <input id="chk1" type="checkbox">
</div>

＆＃13;

http://jsfiddle.net/0t01252x/1/

我该怎样防止这种情况？对我来说这似乎是一种非常奇怪的行为。点击事件是点击事件，而不是键盘事件......

注意：使用chrome和FF进行测试

编辑：最差：在控制台中输出事件会产生一个...... MouseEvent！

Answer 1

Quirksmode - click, mousedown, mouseup, dblclick

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

要解决此问题，您可以将click 和 keyup事件附加到复选框。

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

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

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

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

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

Updated Example - 在最新版Chrome / FF / IE中测试过。

＆＃13;

(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);
})();

＆＃13;

<input id="checkbox" type="checkbox" />

＆＃13;

Answer 2

Kaiido似乎有一个很好的解决方案。至于行为，这显然是预期的。根据：

W3C - SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

键盘触发onclick事件以实现辅助功能。即使在鼠标不存在的情况下从键盘触发，浏览器也会使用click事件：

while＆＃34; onclick＆＃34;听起来它与鼠标，onclick事件有关实际上映射到链接或按钮的默认操作。该当用户使用鼠标单击元素时发生默认操作，但是当用户聚焦元素并命中输入或时，也会发生这种情况空间，以及通过辅助功能API触发元素时。

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

2 个答案: