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!
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With