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() の定義
廃止された 初回定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, SphinxKnight, fscholz, AshfaqHossain, ethertank, Kohei
最終更新者: silverskyvicto,