javascript - 防止多次点击按钮

Question

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

有没有更好的方法来防止在页面加载之前第二次点击按钮？

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

注意:我正在寻找不需要任何新 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();
      }
    } 
  });
});

引用资料:

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

@Peter Ivan 在上述引用资料中的注释:

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

Answer 1

我发现这个解决方案既简单又适合我:

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

此解决方案位于: Original solution