Event: preventDefault() メソッド

preventDefault() は Event インターフェイスのメソッドで、ユーザーエージェントに、このイベントが明示的に処理されない場合に、その既定のアクションを通常どおりに行うべきではないことを伝えます。

このイベントは通常、イベントリスナーの 1 つが stopPropagation() または stopImmediatePropagation() を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。

後述のように、 preventDefault() を EventTarget.dispatchEvent() によってディスパッチされたイベントのようなキャンセルできないイベントに対して、 cancelable: true を指定せずに呼び出しても何も効果がありません。

構文

event.preventDefault()

例

既定のクリック処理のブロック

チェックボックスのクリック時、既定の動作ではチェックボックスが切り替わります。この既定の動作を止める方法を以下に示します。

JavaScript

const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", checkboxClick, false);

function checkboxClick(event) {
  let warn = "preventDefault() がこのチェックを妨害しています。<br>";
  document.getElementById("output-box").innerHTML += warn;
  event.preventDefault();
}

HTML

html

<p>チェックボックスコントロールをクリックしてください。</p>

<form>
  <label for="id-checkbox">チェックボックス:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

結果

キーストロークが編集フィールドに到達するのを止める

次の例は、無効なテキスト入力が入力フィールドに到達するのを preventDefault() で止める方法を示しています。今日では、ネイティブの HTML フォーム検証を代わりに使用してください。

HTML

下の HTML フォームはユーザーの入力をキャプチャします。キー入力にしか興味がないので、autocomplete を無効にして、ブラウザーがキャッシュした値で入力フィールドを埋めるのを防いでいます。

html

<div class="container">
  <p>名前を小文字のみで入力してください。</p>

  <form>
    <input type="text" id="my-textbox" autocomplete="off" />
  </form>
</div>

CSS

ユーザが無効なキーを押したときに描画する警告ボックスには、CSS を少し使用します。

css

.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}

JavaScript

そして、こちらがその仕事を行う JavaScript コードです。まず、keydown イベントを待ち受けします。

const myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keydown", checkName, false);

checkName() 関数は押されたキーを調べ、それを許可するかどうかを決定します。

function checkName(evt) {
  const key = evt.key;
  const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
  if (!lowerCaseAlphabet.includes(key)) {
    evt.preventDefault();
    displayWarning(
      "小文字のみを使用してください。\n" + `押されたキー: ${key}\n`,
    );
  }
}

displayWarning() 関数は、問題発生の通知を表示します。これはエレガントな関数ではありませんが、この例の目的には十分です。

let warningTimeout;
const warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
    clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = setTimeout(() => {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}

結果

メモ

イベントフローのいずれかの段階でイベントをキャンセルする途中で preventDefault() を呼び出すと、通常はブラウザーの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。

イベントがキャンセル可能かどうかは event.cancelable を使って確認できます。キャンセル不可のイベントに対して preventDefault() を呼び出しても効果はありません。

仕様書

Specification
DOM Standard # ref-for-dom-event-preventdefault③

ブラウザーの互換性

BCD tables only load in the browser