6

チェックボックス入力のクリックイベントにバインドする場合、イベントハンドラーが実行されるまでにチェックボックスは既に切り替えられており、さらに奇妙なことに、event.preventDefault（）を指定すると、イベントハンドラーの実行後に切り替えが逆になります。

<input id="foo" type="checkbox"/>

function clicked(evt) {
   alert(document.getElementById('foo').checked);
   evt.preventDefault();
}

document.getElementById('foo').addEventListener('click',clicked);

[クロームとFirefoxでテスト済み]

そのコードのJSFiddle

アラートは「true」（またはチェックボックスのプリクリックの反対の状態）で応答します。アラートを閉じると、チェックボックスが元に戻ります。

だから、質問は、

防止されている実際のデフォルトイベントは何ですか？状態が変更される前にイベントハンドラーが実行されていると想定するのは間違っていますか？チェックボックスのクリックを合法的に傍受する方法はありますか？

そして、なぜ世界でpreventDefaultがチェックボックスの再切り替えを引き起こしているのですか？

4

1 に答える 1

8

防止される実際のデフォルト イベントはイベントclickです。誤解が生じるのは、実際のクリックが完全に処理された (つまり、チェックボックスが切り替えられた) 後にイベントが発生すると考えているためです。実際には、イベント モデルでは、イベントの処理中にハンドラーが発生することが規定されています。

それが役立つ場合、すべてがどのように機能するかを説明するのに役立つ別のモデルは、データベース トランザクション モデルです。イベント ハンドラーは、チェックボックスが既に切り替えられているトランザクションの一部として呼び出されると考えてください。

  • チェックボックスの状態を読み取ると、切り替えられていることがわかります (「書き込み」がデータベースに送信されています)。
  • ただし、トランザクションをロールバックすることもできます (この場合、書き込みは元に戻され、チェックボックスは元の値に戻ります)。
于 2011-09-15T17:45:19.693 に答える