概要
イベントがキャンセル可能である場合、上位ノードへのイベントの 伝播 (propagation) を止めずに、そのイベントをキャンセルします。
構文
event.preventDefault();
例
チェックボックスのクリック時、既定の動作ではチェックボックスが切り替わります。
この既定の動作を止める方法を以下に示します。
<!DOCTYPE html> <html lang="ja"> <head> <title>preventDefault example</title> <script> function stopDefAction(evt) { evt.preventDefault(); } document.getElementById('my-checkbox').addEventListener( 'click', stopDefAction, false ); </script> </head> <body> <p>チェックボックスコントロールをクリックして下さい。</p> <form> <input type="checkbox" id="my-checkbox" /> <label for="my-checkbox">チェックボックス</label> </form> </body> </html>
preventDefault
の実例は こちら で見ることができます。
次の例では、 preventDefault()
を使って、不正なテキストが入力欄に入力されるのを防いでいます。
<!DOCTYPE html> <html lang="ja"> <head> <title>preventDefault example</title> <script> var myTextbox = document.getElementById('my-textbox'); function checkName(evt) { var charCode = evt.charCode; if (charCode != 0) { if (charCode < 97 || charCode > 122) { evt.preventDefault(); alert( "小文字のみ入力できます。" + "\n" + "charCode: " + charCode + "\n" ); } } } myTextbox.addEventListener( 'keypress', checkName, false ); </script> </head> <body> <p>あなたの名前を小文字のみで入力してください。</p> <form> <input type="text" id="my-textbox" /> </form> </body> </html>
注記
イベントフローのいずれかの段階でイベントをキャンセルする途中で preventDefault
を呼び出すと、通常はブラウザの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。
Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)
preventDefault()
を呼び出すと、 event.defaultPrevented
プロパティの値が true
になります。
イベントがキャンセル可能かどうかは event.cancelable
を使って確認できます。キャンセル不可能なイベントに対して preventDefault
を呼び出しても効果はありません。
preventDefault
は、DOM を通じたイベントのさらなる伝播を止めません。伝播を止めるには event.stopPropagation を使ってください。