2

ユーザーがデータを送信せずにページを離れようとするたびに、javascript window.onbeforeunload 関数を使用してユーザーにアラートを表示しています。この機能はうまく機能しています。

次のような内部リンクをクリックしても window.onbeforeunload イベントが発生する IE (のみ) で問題が発生します。

<a class="editlink" onclick="fnEditLink(this);" href="javascript:void(0);" > <img src="/images/newstyle/pencil.png" alt="edit" /> Edit </a>

これは、リダイレクトや ajax 呼び出しを行わずにグリッド行を編集するために使用される内部リンクです。HTML DOM 構造で新しく作成された行を単純に編集するだけです。

これは、ページで使用した JavaScript コードです。

<script>
var is_clicked = false;
$(document).ready(function(){
    $('#get-a-quote-step2').submit(function(){
        is_clicked = true;
        return validate('get-a-quote-step2');
    });
    $('#skip_step, form input').click(function(){is_clicked = true;});
});

window.onbeforeunload = function() {

    if(!is_clicked)
        return false;
}
is_clicked = false;
<script>

Firefox ではすべて正常に動作していますが、IE では問題が発生しています。私はこれをテストするために IE 8 を使用していますが、IE のすべてのバージョンに問題があると思います。

上記のコードでは、内部リンクをクリックすると is_clicked フラグが true に設定され、更新ボタンを押すと、保存されていないデータがすべて失われることをユーザーに尋ねることなく、ページをリロードできます。

とにかくespがあるかどうか考えていました。isNotClicked() のような特定のリンクがクリックされていないかどうかを知るために、JQuery で または、私の問題に対する他の解決策があれば、それは大歓迎です。

4

1 に答える 1

2

したがって、特定のリンクが onbeforeunload イベントを発生させないようにしたい場合は、クリック イベント宣言内で単純に false を返すことができます...

<a href="http://google.com">Call unload first and load a page</a>
<a href="javascript:void(0);" id="request">Do an ajax request</a>
<script>
$(document).ready(function(){
    $('#request').click(function(e){
        //do some stuff
        //returning false wil prevent the onbeforeunload event from firing
        //but also will not redirect if the link has an href
        return false;
    });
});
window.onbeforeunload = function(e){
        return 'Want to leave?';
}

</script>
于 2012-08-12T00:31:22.470 に答える