按下空格键时切换选中复选框答案

【问题标题】：Toggle checked on checkbox when spacebar is pressed按下空格键时切换选中复选框
【发布时间】：2013-11-10 01:10:36
【问题描述】：

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

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

以上内容在 Chrome v30 和 IE10 中运行良好，但在 Firefox v24 中则不行。当您单击复选框，然后使用空格键切换它，它会暂时选中它，然后取消选中它，反之亦然。

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

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

Here's the fiddle where Firefox is affected

有人知道为什么会发生这种情况，我该如何解决？

【问题讨论】：

啊，现在我明白你的意思了。

标签： jquery

【解决方案1】：

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

我只是为此添加一个条件：

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

我们检查“空格”事件是否不是由复选框本身触发的。

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

【讨论】：

还有一点，例如@davidkonrad 示例，您不需要该属性的函数闭包。更新示例：jsfiddle.net/3pmvw/50（如果您没问题，我会更新上面的解决方案以使其更正确）。
我这样做是为了不必第二次从 dom 调用 #example，并不是说会有很大的不同
我仍然不完全明白为什么preventDefault() 不会阻止当元素具有焦点时在 Firefox 中触发 click 事件。也许它与调度事件的顺序有关，因为 keyup() 在 Firefox 中确实阻止了它，但在 IE 中没有阻止它
我不是 100% 确定，但问题是对于复选框，浏览器会在内部触发一个事件（点击），这与您的 keydown 不同，并且不在同一个事件链中。不知道在不同的浏览器中订购:?。看看这个答案是否有帮助：stackoverflow.com/questions/11205957/…

【解决方案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);
            }
        }
    });

这对我来说是完美的工作。

【讨论】：