Пробел запускает событие щелчка на флажке?

Ответ 1

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

Ответ 2

У Кайдо похоже хорошее решение. Что касается поведения, то это, по-видимому, ожидается. Согласно:

W3C - SCR35: доступ к клавишам действий с помощью события onclick якорей и кнопок

событие onclick запускается клавиатурой для целей доступности. Браузеры используют событие click, даже если его запускают с клавиатуры в случае, если мышь не присутствует:

Пока "onclick" звучит так, будто он привязан к мыши, событие onclick фактически отображается на действие по умолчанию для ссылки или кнопки. действие по умолчанию происходит, когда пользователь щелкает элемент с помощью мыши, но это также происходит, когда пользователь фокусирует элемент и попадает в пробел и когда элемент запускается через API доступности.