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

Question

如果您在复选框上使用空格键，它会选中该框。一切都很好，直到我决定禁用父 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/

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

注意:使用 chrome 和 FF 测试

编辑:最差:在控制台中输出事件会产生... MouseEvent!

Answer 1

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.

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

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

Updated Example - 在最新版本的 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" />