javascript - 双击只提交一次

Question

可能重复：
检测到双击事件时需要取消单击/鼠标事件
防止双击提交按钮

我有以下功能

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

}

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

Answer 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");
   }
});

Answer 2

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

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

Answer 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;
  }
}