<a>タグのonclck属性には"return false"を入れたほうがいい

スポンサーリンク



仕事でJavascriptを使っててへぇ〜と思ったのでブログにまとめました。
自分の備忘録&Javascript初心者の助けになればと思いネットの海に流しておきます。

問題

aタグのonclick属性にJavascriptの関数hoge()を指定して、クリックされた時にhogeを呼び出したいとします。

<body>
    <script type="text/javascript">
      var hoge = function(){
        console.log("fuga");
        return false;
      };
    </script>

    <p>onclick属性について</p>
    <a href="https://www.google.co.jp" onclick="hoge();">
     クリックしてください</a>
  <!-- href="#"とかが一般的だけど画面遷移したことがわかりやすいようGoogleにしています -->
  </body>



これでaタグのリンクをクリックするとhoge()が呼び出されたあとにGoogleに画面遷移してしまいます。 f:id:tkhstol-929:20181003221126g:plain

(一瞬ですが右側のコンソールに"fuga"が出力されています)
クリック時にhogeを実行しつつ画面遷移はしたくない!という場合はどうしたらよいでしょうか。

解決策

onclick属性にreturn falseを追加してあげましょう。

    <a href="https://www.google.co.jp" onclick="hoge();return false;">
     クリックしてください</a>


「onclickの中身を実行」→「hrefの宛先へ画面遷移」という順番で行われる処理ですが、onclickが終わった時点でfalseを返すことで画面遷移を防ぎます。

とりあえずreturn falseを末尾につけとけば画面遷移はしません。

補足

:以下のようにJavascriptの関数の中でreturn falseを書いても無意味です。
ふっつーに画面遷移してしまいます。

    <script type="text/javascript">
      var hoge = function(){
        console.log("fuga");
        return false;
      };
    </script>

Javascriptの関数内でreturn falseを書いても、そのfalseはイベントハンドラであるonclickには届きません。
onclick="hoge();return false;のようにonclickに直接書く必要があります。

にほんブログ村 IT技術ブログへ
にほんブログ村