jQuery - デフォルトのイベントの無効化

公開日：2018-12-12 更新日：2019-05-14
[jQuery]

1. 概要

submit のボタンやリンクなどのデフォルトのイベントを無効にします。

$(セレクタ).on("イベント名", function(e){
	e.preventDefault(); //または return false;
});
prevent : 防ぐ、止める

2. サンプル

リンクとボタンをクリックすると、文字列が表示されます。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <a href="https://9cubed.info/" style="color:skyblue;">https://9cubed.info/</a><br />
  <br />
  <form action="https://9cubed.info/">
    <input type="submit" id="registry" value="登録" />
  </form>
  <br />
  <div id="msg"></div>

  <!-- Script -->
  <script>
    $(function() {
      $("a").on("click", function(e){
        $("#msg").text("リンクがクリックされました。");

        //リンク先に飛ばないようにする
        e.preventDefault(); //または return false;
      });
      
      $("#registry").on("click", function(e){
        $("#msg").text("submit ボタンがクリックされました。");

        //submitを無効にする
        e.preventDefault(); //または return false;
      });

    });
  </script>

</body></html>

実行結果：画面



Tag

New Article