防止多次点击按钮

Question

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

是否有更好的方法可以防止在页面加载之前再次单击按钮？

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

注意:我正在寻找一种不需要任何新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. 验证器导致双击检查的不正确行为
2. 是否使用Page_IsValid或Page_ClientValidate()(用于客户端事件)

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

重复调用Page_ClientValidate()可能会导致页面过于突兀(多个警报等).

Answer 1

我发现这个解决方案很简单,对我有用:

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

该解决方案见于: 原始解决方案

Answer 2

单击时禁用该按钮,在操作完成后启用它

$(document).ready(function () {
    $("#btn").on("click", function() {
        $(this).attr("disabled", "disabled");
        doWork(); //this method contains your logic
    });
});

function doWork() {
    alert("doing work");
    //actually this function will do something and when processing is done the button is enabled by removing the 'disabled' attribute
    //I use setTimeout so you can see the button can only be clicked once, and can't be clicked again while work is being done
    setTimeout('$("#btn").removeAttr("disabled")', 1500);
}

工作实例

Answer 3

JS通过使用事件属性提供了一个简单的解决方案:

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks
    // code here. // It will execute only once on multiple clicks
  }
});

Answer 4

我通过@Kalyani 修改了解决方案，到目前为止，它的工作一直很漂亮！

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){ return true; }
  else { return false; }
});

Answer 5

在回调的第一行禁用指针事件，然后在最后一行恢复它们。

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

Answer 6

经过几个小时的搜索，我以这种方式修复了它：

    old_timestamp = null;

    $('#productivity_table').on('click', function(event) {
    
    // code executed at first load
    // not working if you press too many clicks, it waits 1 second
    if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp)
    {
         // write the code / slide / fade / whatever
         old_timestamp = event.timeStamp;
    }
    });

Answer 7

你可以使用 jQuery 的 [one][1] ：

.one( events [, data ], handler ) 返回： jQuery

描述：将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。

参见示例：

使用 jQuery： https: //codepen.io/loicjaouen/pen/RwweLVx

// add an even listener that will run only once
$("#click_here_button").one("click", once_callback);