双击只提交一次[重复]答案

【问题标题】：Submit only once on double click [duplicate]双击只提交一次[重复]
【发布时间】：2012-06-14 00:03:45
【问题描述】：

可能重复：
Need to cancel click/mouseup events when double-click event detected
Preventing double-click of Submit button

我有以下功能

$("#btnSubmit").click(function(){
                $("#btnSubmit").attr("disabled", "disabled");
          ....make ajax request
              $("#btnSubmit").removeAttr("disabled");

}

问题是我想处理第一次双击双击。或单击。因为当用户双击时，它会运行该函数两次。如果我使用 .one() 它将只处理单击。但我也想处理双击但只处理一次。有什么解决办法？

【问题讨论】：

在 Web 应用程序中同时处理单击和双击几乎是不可能的，而且出于可用性原因，这是一个糟糕的想法。
您还应该使用“.prop()”来设置/取消设置“禁用”属性：.prop("disabled", true) 或.prop("disabled", false)。
第一次点击后我会禁用按钮。
@Pointy。应该是一个答案... :)
或者更好：Preventing double-click of Submit button -- 请使用搜索。

标签： javascript jquery double-click

【解决方案1】：

使用

dblclick()

而不是click()

阅读更多关于.dblclick()

你的代码应该是这样的

$("#btnSubmit").dblclick(function(){
   $("#btnSubmit").attr("disabled", "disabled");
   $("#btnSubmit").removeAttr("disabled");
});

你可以使用标志

var alreadyClicked = false;
$("#btnSubmit").click(function(){
   if(alreadyClicked) {
      alreadyClicked = false;
      return false;
   } else {
     alreadyClicked = true;
     $("#btnSubmit").attr("disabled", "disabled");
     $("#btnSubmit").removeAttr("disabled");
   }
});

【讨论】：

纯 JS 文档：developer.mozilla.org/en/DOM/element.ondblclick
这不会处理单击。
第二个代码块不会区分双击和随后的单击。因此，一旦单击按钮，用户将无法通过更改数据来提交它。

【解决方案2】：

设置一个标记变量以防止在 ajax 请求完成之前执行进一步的点击：

var clicked = false;
$("#btnSubmit").click(function(){
    if (clicked) {
        return;
    } else {
        clicked = true;
    }
    $.ajax({
      success: function() {
          clicked = false;
    });
});

【讨论】：

【解决方案3】：

我的解决方案是在按下按钮时停止双击我检查变量。

发生的情况是 click 变量用作检查函数当前是否正在运行。

var click = false;
$("#btnSubmit").click(function(){

  if (click == false) {
    click = true;

    $("#btnSubmit").attr("disabled", "disabled");

    //make ajax request

    $("#btnSubmit").removeAttr("disabled");

    click = false;
  }
}

【讨论】：