2017-03-02 3 views
0

フォームの下部にさまざまなナビゲーションボタンがあります。ユーザーがフォームに変更を加えた後、リンクやボタン以外のボタンをクリックすると、保存されていない変更についてブラウザに警告する警告が表示されます。IEでイベントターゲット要素を選択

ナビゲーションボタンはすべて、データ属性data-save-formを持っており、次のようにスクリプトは現在、次のとおりです。

var formChanged = false; 

$('form').on('change', 'input, textarea, select', function() { 
    formChanged = true; 
}); 

$(window).on('beforeunload', function (e) { 
    if (!$(e.target.activeElement).is('[data-save-form]') && formChanged) { 
     return "Changes you made may not be saved. You can save your progress by clicking the 'Save and Exit' button at the bottom of the page."; 
    } 
}); 

しかし、IEのイベントオブジェクトには、target.activeElementプロパティを持っていないようです。どのようにしてこの要素を見つけることができますか?これにはもっと良い方法がありますか?

これはjQuery 1.11.0を使用している古いサイトですが、この目的では必須ではないと確信しています。

答えて

0

イベントターゲットをキャプチャして使用し、それを使用すると、e.target.activeElementが定義されていませんでした。

var targetElement; 

$(window).on('mousedown', function (e) { 
    targetElement = e.target; 
}); 

$(window).on('beforeunload', function (e) { 
    var target = e.target.activeElement || targetElement; 
    if (!$(target).is('[data-save-form]') && formChanged) { 
     return "Changes you made may not be saved. You can save your progress by clicking the 'Save and Exit' button at the bottom of the page."; 
    } 
}); 

私はこのような解決策を前の別のSO投稿に見ましたが、それを動作させることができませんでした。私が見つけたら、私はそれをリンクします。