Если вы установите пробел на флажке, он проверит флажок. Все было нормально, пока я не решил отключить событие click на родительском 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>Quirksmode - щелчок, mousedown, mouseup, dblclick
Событие клика срабатывает, когда пользователь нажимает на элемент ИЛИ активирует элемент другими способами (т.е. клавиатура)... "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;
}
}
Обновленный пример - протестирован в последних версиях 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" />У Кайдо похоже хорошее решение. Что касается поведения, то это, по-видимому, ожидается. Согласно:
W3C - SCR35: доступ к клавишам действий с помощью события onclick якорей и кнопок
событие onclick запускается клавиатурой для целей доступности. Браузеры используют событие click, даже если его запускают с клавиатуры в случае, если мышь не присутствует:
Пока "onclick" звучит так, будто он привязан к мыши, событие onclick фактически отображается на действие по умолчанию для ссылки или кнопки. действие по умолчанию происходит, когда пользователь щелкает элемент с помощью мыши, но это также происходит, когда пользователь фокусирует элемент и попадает в пробел и когда элемент запускается через API доступности.