Javascript 防止多次点击按钮

我有以下jQuery代码来防止双击按钮。它很好用。我正在使用

Page\u ClientValidate（）

来确保只有在页面有效时才阻止双击。[如果存在验证错误，则不应设置标志，因为没有启动回发到服务器的操作]

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

只有当页面导致回发到服务器时，我们才能设置标志

isoperationprogress=yesIndicator

？是否有合适的

事件

，在用户第二次单击按钮之前将调用该事件

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

注意：这个问题不是重复的。这里我试图避免使用

Page\u ClientValidate（）

。另外，我正在寻找一个

事件

，在那里我可以移动代码，这样我就不需要使用

Page\u 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();
      }
    } 
  });
});

参考资料：

上述参考资料中@Peter Ivan的注释：

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

---

单击时禁用按钮，在操作完成后启用

$(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);
}

---

一种方法是设置一个计数器，如果数字超过某个数字，则返回false。 这么简单

var mybutton_counter=0;
$("#mybutton").on('click', function(e){
    if (mybutton_counter>0){return false;} //you can set the number to any
    //your call
     mybutton_counter++; //incremental
});

---

请确保您的通话上方有“如果”语句。

这应该适用于您：

$(document).ready(function () {
    $('.applicationButton').click(function (e) {
        var btn = $(this),
            isPageValid = Page_ClientValidate(); // cache state of page validation
        if (!isPageValid) {
            // page isn't valid, block form submission
            e.preventDefault();
        }
        // disable the button only if the page is valid.
        // when the postback returns, the button will be re-enabled by default
        btn.prop('disabled', isPageValid);
        return isPageValid;
    });
});

---

请注意，您还应在服务器端采取措施，防止重复发布，因为并非所有访问您网站的访问者都会有礼貌地使用浏览器（更不用说启用JavaScript的浏览器）进行访问。

我发现这个解决方案很简单，对我来说很有效：

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

此解决方案可在以下位置找到：

---

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

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

---

这可能有助于实现所需的功能：

$（'#禁用'）。在（'click'，function（）上{
$（'#disable'）.attr（“disabled”，true）；
});

让我失去能力！
您好
使用计数

 clickcount++;
    if (clickcount == 1) {}

再次返回后，单击计数设置为零。
我们可以使用打开和关闭单击来防止多次单击。我尝试了我的应用程序，它的工作预期

$(document).ready(function () {     
    $("#disable").on('click', function () {
        $(this).off('click'); 
        // enter code here
    });
})

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

如果你正在做一个完整的往返回邮，你可以让按钮消失。如果存在验证错误，则在重新加载页面时，该按钮将再次可见

第一组将样式添加到按钮：

<h:commandButton id="SaveBtn" value="Save"
    styleClass="hideOnClick"
    actionListener="#{someBean.saveAction()}"/>

经过数小时的搜索，我用以下方式修复了它：

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

old_timestamp==null；
$（“#生产率表”）。在（'click'，函数（事件）{
//第一次加载时执行的代码
//如果您按下过多的点击，它将等待1秒
if（old_timestamp==null | | old_timestamp+1000
只需将此代码复制粘贴到脚本中，并使用按钮id编辑按钮1，即可解决问题

 <script type="text/javascript">
                $(document).ready(function(){  
                     $("#button1").submit(function() {
                            $(this).submit(function() {
                                return false;
                            });
                            return true;
                        }); 
        });
     </script


$（文档）.ready（函数（）{
$（“#按钮1”）。提交（函数（）{
$（this）.submit（函数（）{
返回false；
});
返回true；
}); 
});
我修改了@Kalyani的程序，到目前为止，它运行得很好

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

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

.one（事件[，数据]，处理程序）返回：jQuery

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

见示例：

使用jQuery：

纯JavaScript：

为正在交互的元素设置属性
超时后删除该属性
如果元素具有该属性，则不执行任何操作

const throttleInput=document.querySelector（'button'）；
throttleInput.onclick=函数（）{
如果（！throttleInput.hasAttribute（'data-protect-双击'））{
throttleInput.setAttribute（'data-protect-双击'，true）；
throttleInput.setAttribute（'disabled'，true）；
document.body.append（“Foo！”）；
}
setTimeout（函数（）{
throttleInput.removeAttribute（“已禁用”）；
throttleInput.removeAttribute（'data-prevent-双击'）；
}, 3000);
}
点击添加“Foo”我们还将按钮设置为
.disabled=true
。我添加了HTML命令
input
，类型为
hidden
，以确定事务是否已由计算机服务器添加到数据库中

HTML和PHP命令示例：

<button onclick="myAddFunction(<?php echo $value['patient_id'];?>)" id="addButtonId">ADD</button>
<input type="hidden" id="hasPatientInListParam" value="<?php echo $hasPatientInListParamValue;?>">

function myAddFunction(patientId) { 
  document.getElementById("addButtonId").disabled=true;

  var hasPatientInList = document.getElementById("hasPatientInListParam").value;

  if (hasPatientInList) {
    alert("Only one (1) patient in each List.");
    return;
  }

  window.location.href = "webAddress/addTransaction/"+patientId; //reloads page
}

重新加载页面后，计算机会自动将按钮设置为
。disabled=false
。目前，在我们的案例中，这些操作可以防止多次单击问题

我希望这些也能帮助你

谢谢。
使用disable Attribute可能重复的@CarrieKendall在这里我试图避免使用
Page\u ClientValidate（）
这将不起作用，因为计数器不是递增的，也不是递减的。它也比要求的复杂这里我还需要检查
Page\u ClientValidate（）
。我试图避免使用
Page\u ClientValidate（）
如果我的操作没有在1500毫秒内完成怎么办？用户将能够单击它。我认为这对我不起作用。你不会使用setTimeout，那只是为了显示它起作用
<button onclick="myAddFunction(<?php echo $value['patient_id'];?>)" id="addButtonId">ADD</button>
<input type="hidden" id="hasPatientInListParam" value="<?php echo $hasPatientInListParamValue;?>">

function myAddFunction(patientId) { 
  document.getElementById("addButtonId").disabled=true;

  var hasPatientInList = document.getElementById("hasPatientInListParam").value;

  if (hasPatientInList) {
    alert("Only one (1) patient in each List.");
    return;
  }

  window.location.href = "webAddress/addTransaction/"+patientId; //reloads page
}