按下空格键时，勾选复选框

Question

我有一小段代码，用于在按下空格键时切换复选框的checked属性。

$(document).on('keydown', function(e) {
  if (e.which === 32) {
    e.preventDefault();
    $('#example').prop('checked', function() {
      return !this.checked;
    });
  }
});

以上版本在Chrome v30和IE10中运行良好，但在Firefox v24中则无效。当您单击复选框，然后使用空格键切换它，它会立即检查它，然后取消选中它，反之亦然。

我认为问题与使用click时在Firefox中触发keydown()事件的事实有关，尽管使用e.preventDefault()（这会阻止点击事件触发） Chrome和IE）。

我尝试使用相同的代码绑定keyup事件。这解决了Firefox中的问题，但随后向IE引入了同样的问题。

Here's the fiddle where Firefox is affected

有谁知道为什么会这样，以及我如何解决这个问题？

Answer 1

我认为这是正常行为。您正在点击两个不同的事件（复选框更改和文档上的keydown），因此我们不能指望.preventDefault()能够正常工作。

我只是添加一个条件：

if (e.target != $('#example').get(0)) {
    if (e.which === 32) {
        $('#example').prop('checked', ! $('#example').is(":checked"));
    }
}

我们检查复选框本身是否触发了“space”事件。

更新了小提琴：http://jsfiddle.net/3pmvw/23/

Answer 2

jQuery(document).keydown(function (e) {
        event = e || window.event;
        event.stopImmediatePropagation();

        if (event.keyCode == 32) {
            if (jQuery("#indian_holder").is(":checked")) {
                jQuery("#indian_holder").prop("checked", false);
            }
            else {
                jQuery("#indian_holder").prop("checked", true);
            }
        }
    }); 

这对我来说非常合适。