Event
インターフェースの preventDefault()
メソッドは、イベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。このイベントは通常、イベントリスナーの1つが stopPropagation()
または stopImmediatePropagation()
を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。
構文
event.preventDefault();
パラメータ
なし
戻り値
undefined
例
デフォルトのクリック処理をブロックする
チェックボックスのクリック時、既定の動作ではチェックボックスが切り替わります。
この既定の動作を止める方法を以下に示します。
JavaScript
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
event.preventDefault();
}, false);
HTML
<p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox:</label>
<input type="checkbox" id="id-checkbox"/>
</form>
<div id="output-box"></div>
結果
あなたはここで実際にこれを見ることができます:
キーストロークが編集フィールドに到達するのを止める
次の例は無効なテキスト入力が入力フィールドに到達するのを preventDefault()
で止める方法を示しています。今日では通常、ネイティブ HTML フォームの検証を代わりに使用する必要があります。
HTML
ここにフォームがあります:
<div class="container">
<p>Please enter your name using lowercase letters only.</p>
<form>
<input type="text" id="my-textbox">
</form>
</div>
CSS
ユーザが無効なキーを押したときに描画する警告ボックスには、CSSを少し使用します。
.warning {
border: 2px solid #f39389;
border-radius: 2px;
padding: 10px;
position: absolute;
background-color: #fbd8d4;
color: #3b3c40;
}
JavaScript
そしてここでその仕事をする JavaScript コードがあります。 まず、keypress
イベントを待ち受けます:
var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);
checkName()
関数は押されたキーを調べ、それを許可するかどうかを決定します。
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
displayWarning(
"Please use lowercase letters only."
+ "\n" + "charCode: " + charCode + "\n"
);
}
}
}
displayWarning()
関数は問題の通知を表示します。これはエレガントな機能ではありませんが、この例の目的のために仕事をしています:
var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";
function displayWarning(msg) {
warningBox.innerHTML = msg;
if (document.body.contains(warningBox)) {
window.clearTimeout(warningTimeout);
} else {
// insert warningBox after myTextbox
myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
}
warningTimeout = window.setTimeout(function() {
warningBox.parentNode.removeChild(warningBox);
warningTimeout = -1;
}, 2000);
}
結果
上記のコードの結果は次のとおりです。
注記
イベントフローのいずれかの段階でイベントをキャンセルする途中で preventDefault
を呼び出すと、通常はブラウザの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。
Gecko 6.0 の場合、preventDefault()
を呼び出すと Event.defaultPrevented()
プロパティの値が true
になります。
イベントがキャンセル可能かどうかは event.cancelable
を使って確認できます。キャンセル不可能なイベントに対して preventDefault()
を呼び出しても効果はありません。
仕様
仕様書 | ステータス | コメント |
---|---|---|
DOM Event.preventDefault() の定義 |
現行の標準 | |
Document Object Model (DOM) Level 2 Events Specification Event.preventDefault() の定義 |
廃止された | 初回定義 |
ブラウザの互換性
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
preventDefault | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 あり | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 実装状況不明
- 実装状況不明