ページ離脱時の確認用のJavascriptが、IEとChrome、FFで挙動が異なる

Question

JSを使用して、ページ離脱時の確認を作成（といってもコピペですが…）しました。
下記のソースのように、submitボタンについては、JSにて行っております。

問題としては、IEとChromeではページ離脱確認JSの挙動が異なっており困っております。

Chromeでは意図した通りの挙動で
１）画面初期表示
２）テキストエリアに文字入力
３）一時保存、確定（name="btn_regist"）押下以外でページを離脱する
４）確認ダイアログの表示

または、
１１）画面初期表示
１２）テキストエリアに文字入力
１３）一時保存、確定（name="btn_regist"）押下でページを離脱する
１４）確認ダイアログは非表示で、通常登録

になります。

IEは
１）画面初期表示
２）テキストエリアに文字入力
３）一時保存、確定（name="btn_regist"）押下以外でページを離脱する
４）確認ダイアログの表示

または、
１１）画面初期表示
１２）テキストエリアに文字入力
１３）一時保存、確定（name="btn_regist"）押下でページを離脱する
１４）確認ダイアログが表示
と１４）のようにダイアログが表示されてしまっています。

alertを入れて追ってみたのですが、
chromeでは、一時保存、確定（name="btn_regist"）押下には、
1番目：（３）を通る
2番目：（１）を通るが、changeFlgがfalseなので動作しない
と動いている要で鵜sが、
IEでは、一時保存、確定（name="btn_regist"）押下には、
1番目：（１）を通る
2番目：（１）のフラグがtrueなのでダイアログ表示
3番目：（３）を通る
と
IEとChromeでの挙動が異なっているようです。

IEでもChromeと同じ挙動をさせる方法がありましたら
ご教授お願いできますでしょうか。

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

P｡S.
FireFoxでも正常（？）通りの挙動になっております。

//--------------------
// ページ離脱時確認用
//--------------------
$(function(){

  changeFlg = false;

  //（１）
  $(window).on('beforeunload', function() {
    if (changeFlg) {
      return "ページを移動しようとしています。\n入力した内容が失われますがよろしいですか？";
    }
  });

  //（２）
  $("form input, form textarea, form select").change(function() {
    changeFlg = true;
  });

  //（３）
  $("button[name=btn_regist]").click(function() {
    changeFlg = false;
  });

});


//--------------------
// submit時（仮登録・本登録）のボタンの挙動
//--------------------
function submitAction(url, section)
{
  $('form').attr('action', url);
  $('form').submit();
}

<form action method="post">
    <div id="user-button">
      <button class="buttonC" type="button" onclick="location.href='～'">戻る</button>
      <button class="buttonC" type="button" name="btn_regist" value="一時" onclick="submitAction('～,～')">一時保存</button>
      <button class="buttonC" type="button" name="btn_regist" value="確定" onclick="submitAction('～,～')">確定</button>
    </div>
</form>

Answer 1

問題は IE で onclick が先に実行されることにあります。
属性で指定するのをやめて、jQueryでまとめてすれば実行順を考慮しなくて済みます。

  $('button[name="btn_regist"]').click(function() {
    changeFlg = false;
    switch(this.value) {
      case '一時':
        submitAction();
        break;
      case '確定':
        submitAction();
        break;
    }
  });

Comments

[imonikai]

返信遅れて申し訳ありません
onclickをやめ、参考のjqueryを基に作成した所、
想定の動作をIE、Chrome、FFで得ることができました。

今後は、onclickとjqueryを同居させずに作成していきたいと思います。

ありがとうございました。

Answer 2

これと同じ現象ですかね？
IEでonbeforeunloadを使ったときの挙動

まずはこのページの1と同じ、 onclick="submitAction('～,～');return false"で
やってみればどうでしょうか？

P.S 解決できたと思います。こういう方法でいかがでしょうか？ ---

フラグを操っているのはchange及びclickイベントなので、このイベントそれぞれにフラグを分岐し、同じbeforeunloadがイベント化された関数をコールすれば大丈夫です。そして、分岐で片方にはエラーメッセージ、片方にはreturn falseとします。

$(function(){

  var changeFlg;

  //（１）
  unload = function(changeFlg){
	  $(window).on('beforeunload', function() {
	    if (changeFlg) {
	      return "ページを移動しようとしています。\n入力した内容が失われますがよろしいですか？";
	    }
	    return false;
	  });
  }

  //（２）
  $("form textarea, form select").change(function(event) {
	 changeFlg = false;
	unload(changeFlg);
  });

  //（３）
  $("button[name=btn_regist]").click(function(event) {
	  changeFlg = true;
	  unload(changeFlg);
  });

});

Comments

[imonikai]

ご回答ありがとうございます。
ご指摘の通り、return falseを入れてみたのですがやはりIEでの挙動は変わらずでした。
試しにsubmitActionメソッドの内部にもreturn falseしてみたのですが同様の動きでした。
参考URLですが、これに似た現象だとは思います。

挙動がどうなるかわかりませんが、
changeFlg の変数をグローバルにして、
submitAction()メソッド内でfalseにして
対応してみようかと思います
（jsの仕様というか作法として良いのかわかりませんが…）

ご回答ありがとうございました

[FKM]

解決策載せましたので、ご参照ください。