Spacebar triggering click event on checkbox?

Question

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!

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/

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

Edit: worst: outputing the event in the console gives a ... 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.

To work around this, you can attach a click and keyup event to the checkbox.

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 keyup event if the key 32 is pressed (e.keyCode === 32).

If so, manually check the checkbox if it is not checked, and uncheck it if it is checked.

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.

(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" />