jQueryのclickイベント後に保存するかどうかを確認し、必要であれば保存処理を中断したい

Question

$('#save').on('click', function() {
  // 特定の処理

  if (保存の条件) {
    const confirm = window.confirm('保存しますか？');

    if (!confirm) {
      return false;  //中断処理（ただここが動作しない）
    }
  }
})

保存するかどうかを確認をダイアログで表示（保存する・キャンセル）としたいのですが、キャンセルとしたら保存を中断したいのですがそのまま保存処理がされてしまいます。
return falseでは中断処理はされないのでしょうか？

よろしくお願いいたします。

---

追記（色々検証してみました）

$('#save').on('click', function() {
  // 特定の処理

  if (保存の条件) {
    const confirm = window.confirm('保存しますか？');

    if (!confirm) {
      return false;  //中断処理（ただここが動作しない）
    }
  }
  return false;  //わざと入れてみた（絶対ページを遷移しないように）
})

上記のように末尾にreturn falseを追加してみましたが、画面遷移してしまいました。
補足事項ですが#saveとは保存ボタンにつけられているidのことです。それをクリックした際に、入力されたものが正しいかを判断して、正しくなければ確認ダイアログを出す。キャンセルが押されれば画面遷移はしないし、OKが押されればそのまま保存する、といった処置を書いています。

Answer 1

「OKが押されればそのまま保存する」というのを具体的にどのようにしているのか書いていただけませんか？

ブラウザ側で「保存」するのではなく、サーバーに何らかのデータを送信 (form を submit？ ajax を使って送信？）してサーバーで保存するのだろうと想像していますが、#save ボタンクリックでそのあたりがどのような仕組みで動くのですか？

confirm で false が戻ってきても送信がキャンセルできるようになっていないのではないですか？

Answer 2

submitの制御をするならイベントをキャンセルしてください

$(function(){
  $('#save').on('click', function(e) {
    if(!confirm('保存しますか？')) {
      e.preventDefault();
      return false;
    }
    alert("save!");
  });
});

<form>
<input type="submit" id="save" value="save">
</form>

Comments

[marimo.]

変わらず遷移されてしまいます…

https://iwb.jp/return-false-preventdefault-stoppropagation/
「return falseはそれが記述された箇所を読み込んだ時点で以降の処理がすべてなくなる。イベント伝播（バブリング）も発生しない。よって.innerをクリックした場合は".inner"と".outer"の両方が表示されずリンクの遷移も発生しない。」
とあるのでreturn falseを私は選んだ次第です。

[yambejp]

たんに後側に書かれた処理でsubmitする処理が書かれているのかと
私の例示では遷移しないですよね？

Answer 3

原因がわかりました。継承元のjsでsubmitをクリックするとsubmitが実行される処理が記述されていたのでこれがおそらく原因だと思われます。
なんだか気づいたらたくさんの回答を寄せてしまって皆さんにはご迷惑をおかけいたしました…
また何かありましたら回答いただければと思います、

この度は本当にご迷惑をおかけいたしました。

Answer 4

スクリプトにエラーが出ているんじゃないですか？コードの一番上に

"use strict";
```を入れて、
![コンソール](e353cdb9b8f8b762c1ca336e7350cc10.png)
chromeでしたらデベロッパーツールのConsoleタブの「Preserve log」にチェックを入れて、観察してみてください。エラーが出ていると、スクリプトが実行されず、submitされてしまいます。

Answer 5

if (保存の条件) {
    if (window.confirm('保存しますか？')) {
        return true;
    }
    return false;
}

これでイケルと思います。

Comments

[marimo.]

保存が実行されてページが遷移されてしまいますね…

$('#save').on('click', function() {
// 特定の処理

if (保存の条件) {
if (window.confirm('保存しますか？');) {
return true;
}
return false; //中断処理（やはりが動作しない）
}
})