空格键是否在复选框上触发点击事件？

Sebas 发表于 Dev

塞巴斯

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

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/

我该如何预防？在我看来，这是一种非常奇怪的行为。点击事件是点击事件，不是键盘事件...

注意：经过铬和FF测试

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

乔什·克罗齐耶（Josh Crozier）

Quirksmode-单击，鼠标按下，鼠标向上，dblclick

当用户单击某个元素或通过其他方式（例如键盘）激活某个元素时，将触发click事件。“ click”事件实际上是用词不当：应将其称为“ activate”事件。

要解决此问题，您可以将click and 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;
    }
}

更新的示例-在最新版本的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);
})();