TIL : preventDefaultとは

2019/11/07(Thu) - 17:56
  • DOMに対してユーザーが実行できるデフォルト動作を妨害する事ができるもの

前提知識

  1. イベントの種類
    • ユーザーが実行するイベント(Click / KeyPress / touchMove)
      • こちらのイベントに対してイベントリスナを設定する場合に「preventDefault」を検討する
    • ブラウザが実行するイベント(DOMContentLoaded / ended / error)
  2. イベントのデフォルト動作
    「preventDefault == デフォルトの動作を発生させない」事だが、各イベントのデフォルト動作は何なのかを知る(意識)する必要がある。
  • デフォルト動作の例
    • touchmove => SPの画面がスクロール
    • テキストタイプの「form」での「keypress」 => 文字が入力される
    • inputの「submit」での「click」 => actionで指定されたURLへ遷移+データ送信
    • 上記のデフォルト動作を妨害したいかどうかを考える
  1. passive: false

preventDefaultを正常に扱うためには「passive: false」の指定が必要となる(最新のブラウザの場合)

下記の例では「keypress」のイベントリスナの第三引数に passive: false(このイベントは受け身ではない => 妨害する)を指定している事によって、イベントが実行される。

<p>Please enter your name in lowercase letters only.</p>
<form>
	<input type="text" id="my-textbox" />
</form>

<script>
var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener( 'keypress', checkName, {passive: false} );

function checkName(e) {
  var charCode = e.charCode;

  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      e.preventDefault();
      alert("小文字のみ入力できます。");
    }
  }
}
</script>

カテゴリ