JavaScript イベントを無効化する(preventDefault)

・preventDefaultメソッドとは

・イベントを無効化するサンプル

・ブラウザのショートカットキー(ctrl+s)の動作を止めるコード

preventDefaultメソッドとは

イベントオブジェクト.preventDefault();

preventDefaultを使用することでイベントを無効化します。
イベントオブジェクトのメソッドです。
使い所の例としては、ウェブブラウザのデフォルトで設定されているイベントの動作をキャンセルさせたいとき等です。

イベントを無効化するサンプル

クリックイベントを無効化するサンプルです。

チェックボックス1はイベントを無効化しているのでチェックできません。
チェックボックス2は何もしていないのでチェックできます。

チェックボックス1 チェックボックス2

上記サンプルのコードです。

<input type="checkbox" id="check1" />チェックボックス1
<input type="checkbox" id="check2" />チェックボックス2

<script>
  const check1 = document.getElementById("check1");

  check1.addEventListener("click", function (e) {
    e.preventDefault();
  });
</script>

1行目と2行目にチェックボックスがあります。

7行目は、1行目のチェックボックスに対してイベントリスナを登録しています。
8行目は、preventDefaultメソッドを実行します。
そのため1行目のチェックボックスはチェックすることができません。

7行目のfunction(e)のeは、Eventオブジェクトです。Eventオブジェクトはイベントリスナの引数として渡すことができます。

ブラウザのショートカットキー(ctrl+s)の動作を止めるコード

Chromeでctrl+sを押すとブラウザの保存のダイアログが表示されますが、これを停止できます。

<script>
document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault(); // ← 「Ctrl+S」のブラウザ保存を行わせない
    console.log("自分の処理を実行");
  }
});
</script>