防止多次点击按钮 [英] Preventing multiple clicks on button

问题描述

我有以下jQuery代码，以防止双击按钮。它工作正常。我正在使用 Page_ClientValidate（）来确保仅在页面有效时才会阻止双击。 [如果有验证错误，则不应设置标志，因为没有回发服务器启动]

I have following jQuery code to prevent double clicking a button. It works fine. I am using Page_ClientValidate() to ensure that the double click is prevented only if the page is valid. [If there are validation errors the flag should not be set as there is no postback to server started]

是否有更好的方法可以防止第二次点击按钮之前页面加载回来？

Is there a better method to prevent the second click on the button before the page loads back?

我们可以设置标志 isOperationInProgress = yesIndicator 只有当页面导致回发到服务器时？是否有适合的事件，在用户第二次点击按钮之前会调用它？

Can we set the flag isOperationInProgress = yesIndicator only if the page is causing a postback to server? Is there a suitable event for it that will be called before the user can click on the button for the second time?

注意：我正在寻找一种不需要任何新API的解决方案

Note: I am looking for a solution that won't require any new API

注意：这个问题不重复。在这里，我试图避免使用 Page_ClientValidate（）。此外，我正在寻找一个事件我可以移动代码，以便我不需要使用 Page_ClientValidate（）

Note: This question is not a duplicate. Here I am trying to avoid the use of Page_ClientValidate(). Also I am looking for an event where I can move the code so that I need not use Page_ClientValidate()

注意：我的方案中没有涉及ajax。 ASP.Net 表单将同步提交给服务器。 javascript中的按钮单击事件仅用于防止双击。表单提交是使用ASP.Net同步的。

Note: No ajax involved in my scenario. The ASP.Net form will be submitted to server synchronously. The button click event in javascript is only for preventing double click. The form submission is synchronous using 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();
      }
    } 
  });
});

参考：

1. 验证码导致双重行为不当点击检查


2. 是否使用Page_IsValid或Page_ClientValidate（）（用于客户端事件）

1. Validator causes improper behavior for double click check
2. Whether to use Page_IsValid or Page_ClientValidate() (for Client Side Events)

@Peter Ivan在上述参考文献中注意：

Note by @Peter Ivan in the above references:

重复调用Page_ClientValidate（）可能会导致页面过于突兀（多个警报等） ）。

calling Page_ClientValidate() repeatedly may cause the page to be too obtrusive (multiple alerts etc.).

推荐答案

我发现这个简单易用的解决方案：

I found this solution that is simple and worked for me:

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

此解决方案见于：
原始解决方案

这篇关于防止多次点击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！