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 でイベントがトリガーされるという事実と関係があると思います (これにより、Chrome と IE の両方でクリック イベントがトリガーされなくなります)。keydown()e.preventDefault()

keyupイベントをバインドして、同じコードを使用してみました。これにより、Firefox の問題は修正されましたが、IE にも同じ問題が発生しました。

Firefoxが影響を受けるフィドルは次のとおりです

なぜこれが起こっているのか、どうすれば回避できるのか誰か知っていますか?

4

2 に答える 2

2

正常な動作だと思います。2 つの異なるイベント (チェックボックスの変更とドキュメントのキーダウン) をヒットしているため、動作することは期待できません.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 に答える