Event: preventDefault() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

メモ: この機能はウェブワーカー内で利用可能です。

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

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

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

パッシブリスナーが preventDefault() を呼び出した場合、何も起こらず、コンソールに警告が表示される場合があります。

構文

js
preventDefault()

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

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

JavaScript

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

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

function checkboxClick(event) {
  const warn = "preventDefault() がこのチェックを妨害しています。\n";
  document.getElementById("output-box").innerText += 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 イベントを待ち受けします。

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

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

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

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

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

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

  if (document.body.contains(warningBox)) {
    clearTimeout(warningTimeout);
  } else {
    // warningBox を myTextbox の後に挿入
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

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

結果

メモ

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

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

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
preventDefault

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support