HTMLのデフォルトの挙動をキャンセルする

デフォルトの挙動を意図的にキャンセルする

HTMLの各要素はリンクのa要素やフォームの入力に関するinput要素など、デフォルトで実行する動作が設定されているものがあります。
JavaScriptではこれらの要素の挙動を、イベントの発生するタイミングでキャンセルすることができます。

イベントが発生したときにEventオブジェクトのpreventDefaultメソッドを実行すると、HTML要素のデフォルトの挙動をあえて意図的にキャンセルすることができます。

以下の例はa要素がクリックされたときに、href属性に指定されたURLへの移動をpreventDefaultメソッドでキャンセルします。
このコードを実行すると、a要素のあるリンクをクリックしてもページ移動はしません。

HTML コード例

<p><a href="https://gray-code.com/">GRAYCODE</a>へのリンク</p>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // a要素を取得
  var link_element = document.querySelector("a");

  // a要素にイベントリスナーを登録
  link_element.addEventListener('click', function(e){

    if(e.cancelable) {
      // デフォルトの挙動をキャンセル
      e.preventDefault();
      console.log("リンクによるページ遷移をキャンセルしました");
    }
  });

});

JavaScriptコードの内容を解説します。

a要素を取得した後に、addEventListenerメソッドで左クリックをイベントリスナーに登録します。
ここで実行する処理に対して、発生するEventオブジェクトを変数eに入れて渡します。

イベントが発生したときに実行する処理では、if文を使ってcancelableプロパティの値をチェックしています。

cancelableプロパティはpreventDefaultメソッドによる挙動のキャンセルが可能なときはtrue、不可のときはfalseが値として入っています。
dispatchEventメソッドで発生させたイベントを処理するときに、このプロパティの値がfalseになっていることがあります。

続いて、if文の中でpreventDefaultメソッドを実行します。
ここでデフォルトの挙動をキャンセルした後に、コンソールへ「リンクによるページ遷移をキャンセルしました」というメッセージを出力して完了します。

フォームの送信をキャンセルする

もう1つ、フォームの送信をキャンセルする例を解説します。

フォームでは「type="submit"」による送信ボタンを押したときに入力データが送信されますが、この送信をpreventDefaultメソッドを使って取り消します。

HTML コード例

<form method="post" action="">
  <input type="text" name="input_name" value="">
  <input type="submit" name="btn_submit" value="送信">
</form>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // 送信ボタンのHTML要素を取得
  var submit_element = document.querySelector("[type=submit]");

  // a要素にイベントリスナーを登録
  submit_element.addEventListener('click', function(e){

    if( e.cancelable ){

      // フォーム送信をキャンセル
      e.preventDefault();
      console.log("フォーム送信をキャンセルしました");
    }
  });

});

JavaScriptのコードでやっている内容はリンクのときとほぼ同じです。
送信ボタンのinput要素を取得するためにquerySelectorメソッドに変更しているところが一番大きい変更点になります。

このコードは実行すると、1行テキストフォームに入力してから「送信」ボタンを押しても何も起こりません。
あえてHTMLのデフォルトの動作をキャンセルすると、例えばフォームを送信する前に入力された内容を確認する処理を加えたり、Ajaxなど別方法でフォーム送信をするように設定することができます。