ほぼ3年後、私は似たようなものを探しています. 受け入れられる「迅速な」解決策が見つからなかったので、OPの基準に非常に近いものを書きました。他の人が将来役立つと思うかもしれません。
JavaScript はイベント ドリブンです。つまり、純粋な JavaScript の確認機能を一時停止するために使用できる「待機」または「スリープ」ループをサポートしていません。オプションには、ブラウザ プラグインまたは AJAX を使用したプロセッサ サイクルの書き込みが含まれます。ますますモバイル化が進み、インターネット接続が不安定になることもあるこの世界では、これらのどれも優れたソリューションではありません. これは、「確認」機能からすぐに戻らなければならないことを意味します。
ただし、上記のコード スニペットには「false」ロジックがないため (つまり、ユーザーが [キャンセル] をクリックしても何も行われない)、ユーザーが [OK] をクリックしたときに、「クリック」または「送信」イベントを再度トリガーできます。 " 「確認」関数内でフラグを設定し、そのフラグに基づいて対応してみませんか?
私のソリューションでは、「モーダル」ダイアログではなく FastConfirm を使用することにしました。必要なものを使用するようにコードを簡単に変更できますが、私の例はこれを使用するように設計されています。
https://github.com/pjparra/Fast-Confirm
これが行うことの性質上、パッケージ化するクリーンな方法はわかりません。荒削りな部分が多すぎると感じた場合は、遠慮なくそれらを滑らかにするか、他の人が推奨する方法でコードを書き直してください。
/* This version of $.fn.hasEvent is slightly modified to provide support for
* the "onclick" or "onsubmit" tag attributes. I chose this because it was
* short, even if it is cryptic.
*
* Learn more about the code by Sven Eisenschmidt, which is licensed under
* the MIT and GPL at:
* http://github.com/fate/jquery-has-event
*/
(function($) {
$.fn.hasEvent = function(A, F, E) {
var L = 0;
var T = typeof A;
E = E ? E : this;
var V = (E.attr('on'+A) != undefined);
A = (T == 'string') ? $.trim(A) : A;
if (T == 'function')
F = A, A = null;
if (F == E)
delete(F);
var S = E.data('events');
for (e in S)
if (S.hasOwnProperty(e))
L++;
if (L < 1)
return V; // = false;
if (A && !F) {
return V = S.hasOwnProperty(A);
} else if(A && S.hasOwnProperty(A) && F) {
$.each(S[A], function(i, r) {
if(V == false && r.handler == F) V = true;
});
return V;
} else if(!A && F) {
$.each(S, function(i, s) {
if (V == false) {
$.each(s, function(k, r) {
if (V == false && r.handler == F)
V = true;
});
}
});
}
return V;
}
$.extend($, {hasEvent: $.fn.hasEvent});
}) (jQuery);
/* Nearly a drop-in replacement for JavaScript's confirm() dialog.
* Syntax:
* onclick="return jq_confirm(this, 'Are you sure that you want this?', 'right');"
*
* NOTE: Do not implement "false" logic when using this function. Find another way.
*/
var jq_confirm_bypass = false;
function jq_confirm(el, question, pos) {
var override = false;
var elem = $(el);
if ($.fn.fastConfirm == undefined) {
override = confirm(question);
} else if (!jq_confirm_bypass) {
if (pos == undefined) {
pos = 'right';
}
elem.fastConfirm({
position: pos,
questionText: question,
onProceed: function(trigger) {
var elem = $(trigger);
elem.fastConfirm('close');
if (elem.hasEvent('click')) {
jq_confirm_bypass = true;
elem.click();
jq_confirm_bypass = false;
}
if (elem.hasEvent('submit')) {
jq_confirm_bypass = true;
elem.submit();
jq_confirm_bypass = false;
}
// TODO: ???
},
onCancel: function(trigger) {
$(trigger).fastConfirm('close');
}
});
}
return override ? override : jq_confirm_bypass;
}
だから... onclick="return confirm('これをテストしますか?');" onclick="return jq_confirm(this, 'これをテストしますか?');" pos/"right" パラメータはオプションであり、Fast-Confirm 専用です。
クリックすると、jq_confirm() 関数が jQuery ダイアログを生成し、「false」を返します。ユーザーが「OK」をクリックすると、jq_confirm() はフラグを設定し、元のクリック (または送信) イベントを呼び出し、「true」を返し、同じページに留まりたい場合にフラグを設定解除します。