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

Question

Если вы установите пробел на флажке, он проверяет флажок. Все было в порядке, пока я не решил отключить событие 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>

http://jsfiddle.net/0t01252x/1/

Как я могу предотвратить это? Мне кажется очень странным поведением. Нажмите кнопку события события, а не событие клавиатуры ...

Примечания: протестировано с хромом и FF

Edit: худший: outputing события в консоли дает ... MouseEvent!

Answer 1

Quirksmode - click, mousedown, mouseup, dblclick

замкового пожаров событий, когда пользователь нажимает на элементе или активирует элемент других средств (то есть клавиатуры) ... «нажмите» событие действительно неправильно: его следует назвать событием «активировать».

Чтобы обойти эту проблему, вы можете прикрепить 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; 
    } 
} 

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

Answer 2

У Kaiido, кажется, хорошее решение. Что касается поведения, то это, по-видимому, ожидается. По:

W3C - SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

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

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