javascript - ボタンの複数回クリックの防止

Question

ボタンのダブルクリックを防ぐために、次のjQueryコードがあります。それは正常に動作します。Page_ClientValidate()ページが有効な場合にのみダブルクリックが防止されるようにするために使用しています。[検証エラーがある場合は、サーバーへのポストバックが開始されていないため、フラグを設定しないでください]

ページが再度読み込まれる前に、ボタンの 2 回目のクリックを防ぐためのより良い方法はありますか?

isOperationInProgress = yesIndicatorページがサーバーへのポストバックを引き起こしている場合にのみ、フラグを設定できますか? eventユーザーが2回目にボタンをクリックする前に呼び出されるのに適したものはありますか?

注：新しいAPIを必要としないソリューションを探しています

注：この質問は重複していません。ここでは、の使用を避けようとしていますPage_ClientValidate()。eventまた、使用する必要がないようにコードを移動できる場所を探していますPage_ClientValidate()

注：私のシナリオにはajaxは含まれていません。フォームはASP.Netサーバーに同期的に送信されます。JavaScript のボタンクリックイベントは、ダブルクリックを防止するためだけのものです。フォームの送信は、ASP.Net を使用して同期されます。

現在のコード

$(document).ready(function () {
  var noIndicator = 'No';
  var yesIndicator = 'Yes';
  var isOperationInProgress = 'No';

  $('.applicationButton').click(function (e) {
    // Prevent button from double click
    var isPageValid = Page_ClientValidate();
    if (isPageValid) {
      if (isOperationInProgress == noIndicator) {
        isOperationInProgress = yesIndicator;
      } else {
        e.preventDefault();
      }
    } 
  });
});

参考文献：

上記の参考文献の @Peter Ivan によるメモ:

Page_ClientValidate() を繰り返し呼び出すと、ページが目障りになりすぎる可能性があります (複数のアラートなど)。

score 52 · Accepted Answer

シンプルで私にとってはうまくいったこの解決策を見つけました：

<form ...>
<input ...>
<button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();">
</form>

この解決策は次の場所にあります: 元の解決策

score 5 · Accepted Answer

コールバックの最初の行でポインターイベントを無効にし、最後の行でそれらを再開します。

element.on('click', function() {
  element.css('pointer-events', 'none'); 
  //do all of your stuff
  element.css('pointer-events', 'auto');   
};

score 2 · Accepted Answer

複数のクリックを防ぐために、オンとオフのクリックを使用できます。私は自分のアプリケーションで試してみましたが、期待どおりに動作しています。

$(document).ready(function () {     
    $("#disable").on('click', function () {
        $(this).off('click'); 
        // enter code here
    });
})

score 2 · Accepted Answer

カウントを使用して、

 clickcount++;
    if (clickcount == 1) {}

再び戻ってきた後、クリックカウントはゼロに設定されました。

score 0 · Accepted Answer

これはあなたのために働くはずです：

$(document).ready(function () {
    $('.applicationButton').click(function (e) {
        var btn = $(this),
            isPageValid = Page_ClientValidate(); // cache state of page validation
        if (!isPageValid) {
            // page isn't valid, block form submission
            e.preventDefault();
        }
        // disable the button only if the page is valid.
        // when the postback returns, the button will be re-enabled by default
        btn.prop('disabled', isPageValid);
        return isPageValid;
    });
});

サイトへのすべての訪問者がブラウザ (ましてや JavaScript 対応のブラウザ) で訪問するほど礼儀正しいわけではないため、二重投稿を防ぐためにサーバー側でも対策を講じる必要があることに注意してください。

score 0 · Accepted Answer

プレーンな JavaScript:

相互作用する要素に属性を設定する
タイムアウト後に属性を削除する
要素に属性がある場合、何もしない

const throttleInput = document.querySelector('button');

throttleInput.onclick = function() {
  if (!throttleInput.hasAttribute('data-prevent-double-click')) {
    throttleInput.setAttribute('data-prevent-double-click', true);
    throttleInput.setAttribute('disabled', true);
    document.body.append("Foo!");
  }

  setTimeout(function() {
    throttleInput.removeAttribute('disabled');
    throttleInput.removeAttribute('data-prevent-double-click');
  }, 3000);
}

<button>Click to add "Foo"!</button>

javascript - ボタンの複数回クリックの防止

18 に答える 18

Related

Reference