概要
イベントがキャンセル可能である場合、上位ノードへのイベントの 伝播 (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 を使ってください。