2

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

$(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。

这是 Firefox 受影响的小提琴

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

4

2 回答 2

2

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

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

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

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

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

于 2013-10-30T12:53:01.070 回答
0 
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);
            }
        }
    });

这对我来说非常有用。

于 2015-05-15T09:49:46.193 回答