画面遷移に"return false;"は必須なのか?

Question

JavaScriptを使っての画面遷移で、気になることがあります。

以下のページを参考に画面遷移のコードを書いたのですが、なぜか反応してくれませんでした。
参考サイト:https://www.sejuku.net/blog/52234

• .Touroku = ボタンのクラス名

$('.Touroku').click(function() {
    location.href = 'https://teratail.com/';
 
})

しかし、location.hrefの次の行に"return false;"と書くと、画面遷移が実現できました。

なぜ"return false;"と書くと画面遷移できるのかが理解できなくて質問を投げさせていただきます。もし、上記のコードに間違っている部分があればご指摘ください。

よろしくお願いします。

Answer 1

なぜ"return false;"と書くと画面遷移できるのかが理解できなくて質問を投げさせていただきます。

<button>にtype="button"の指定がなされていない、という状況ではありませんか？

デフォルトではtype="submit"と同じ扱いになって、フォーム送信を行うので、それを阻止するためにreturn false;が必要となってしまいます。

Comments

[j-nagnn]

なるほど。盲点でした。

[j-nagnn]

>デフォルトではtype="submit"と同じ扱いになって、フォーム送信を行うので、それを阻止するために>return false;が必要となってしまいます。
⇒フォーム送信阻止のためなんですね。ありがとうございます。

Answer 2

「.Touroku」が具体的になんなのかによります。
アンカーやサブミットボタンならイベントを殺す必要があるでしょう。

Comments

[yambejp]

$('.Touroku').on('click',function(e) {
e.preventDefault();
location.href = 'https://teratail.com/';
})

とするのが基本です

[j-nagnn]

基本となる構文も書いてくださり、ありがとうございます。
別の方のコメントから、クラスに指定したボタンがサブミットボタンとなっていました。
改めて、回答して頂きありがとうございました。