.preventDefault()
キャンセル可能なイベントであれば、それ以上の伝搬を停止することなく、そのイベントだけをキャンセルします。
文法
event.preventDefault();
例
チェックボックスのデフォルトのクリックアクションを切り替えています。 このサンプルのデモで、デフォルトのアクションが防がれていることを確認してください。
<!DOCTYPE html>
<html>
<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">Checkbox</label>
</form>
</body>
</html>
こちらでも、
preventDefaultの動作を確認することが出来ます。
下記のデモでは、preventDefault()を使用してテキストフィールドへの、
無効なテキストの入力を停止するようにしています。
<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
<script>
function Init () {
var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener( 'keypress', checkName, false );
}
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
alert(
"Please use lowercase letters only."
+ "
" + "charCode: " + charCode + "
"
);
}
}
}
</script>
</head>
<body onload="Init ()">
<p>半角英小文字のみを使用して、入力してください。</p>
<form>
<input type="text" id="my-textbox" />
</form>
</body>
</html>
注意事項
イベントフロー中のいずれかの段階でのpreventDefault呼び出しは、そのイベントをキャンセルします。
これはデフォルトのアクションが、通常実装によって取得するイベントが、結果として発生していない事にされている事を意味します。
注意: Gecko 6.0でのpreventDefault()呼び出しは、
event.defaultPreventedプロパティの値をtrueにします。
event.cancelableを使用して、
イベントがキャンセル可能か否かを確認することが出来ます。
キャンセル不可のイベントでpreventDefaultを呼び出すと、何も起こりません。
preventDefaultは、DOM上でのそれ以上のイベント伝搬を停止しません。
もし、それを行うのであれば、event.stopPropagationを使用すべきです。
仕様
© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
- 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
- MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。