54

我有以下 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() 可能会导致页面过于突兀（多个警报等）。

4

18 回答 18

52

我发现这个解决方案很简单并且对我有用：

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

此解决方案位于： 原始解决方案

于 2014-12-14T16:33:33.560 回答
27

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
  }
});
于 2017-03-08T07:02:30.200 回答
18

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

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

工作示例

于 2013-05-23T13:28:08.017 回答
11

我修改了@Kalyani的解决方案，到目前为止它运行良好！

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){ return true; }
  else { return false; }
});
于 2017-09-27T18:42:20.703 回答
5

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

element.on('click', function() {
  element.css('pointer-events', 'none'); 
  //do all of your stuff
  element.css('pointer-events', 'auto');   
};
于 2016-05-24T07:53:34.450 回答
4

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

    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;
    }
    });
于 2017-06-15T00:16:25.507 回答
2

你可以使用 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);
于 2019-11-14T10:16:59.527 回答
2

使用计数，

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

再次回来后点击计数设置为零。

于 2016-09-01T10:04:00.427 回答
2

我们可以使用 on 和 off click 来防止多次点击。我对我的应用程序进行了尝试，它按预期工作。

$(document).ready(function () {     
    $("#disable").on('click', function () {
        $(this).off('click'); 
        // enter code here
    });
})
于 2016-10-26T20:50:39.950 回答
2

这可能会有所帮助并提供所需的功能：

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>
<p>Hello</p>

于 2016-07-20T12:08:58.200 回答
0

这应该适合你：

$(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 的浏览器了）。

于 2013-05-23T14:01:54.493 回答
0

这样做的一种方法是设置一个计数器，如果数字超过某个数字，则返回 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
});

确保 if 语句在您的通话之上。

于 2013-05-23T13:28:57.833 回答
0

我发现可行的一种方法是使用引导 css 显示一个带有微调器的模式窗口。这样就不能点击背景中的任何内容。只需确保在漫长的过程完成后再次隐藏模式窗口。

于 2022-01-27T04:37:22.290 回答
0

我发现的绝对最好的方法是在单击时立即禁用该按钮：

$('#myButton').click(function() {
    $('#myButton').prop('disabled', true);
});

并在需要时重新启用它，例如：

  • 验证失败
  • 服务器处理表单数据时出错，然后在使用 jQuery 进行错误响应后

另一种避免快速双击的方法是使用原生 JavaScript 函数ondblclick，但在这种情况下，如果提交表单通过 jQuery 工作，它就不起作用。

于 2021-09-02T15:46:32.227 回答
0

纯 JavaScript：

  1. 为正在交互的元素设置一个属性
  2. 超时后删除属性
  3. 如果元素有属性，什么都不做

const throttleInput = document.querySelector('button');

throttleInput.onclick = function() {
  if (!throttleInput.hasAttribute('data-prevent-double-click')) {
    throttleInput.setAttribute('data-prevent-double-click', true);
    throttleInput.setAttribute('disabled', true);
    document.body.append("Foo!");
  }

  setTimeout(function() {
    throttleInput.removeAttribute('disabled');
    throttleInput.removeAttribute('data-prevent-double-click');
  }, 3000);
}
<button>Click to add "Foo"!</button>

于 2021-04-13T15:30:07.680 回答
0

我们还将按钮设置为.disabled=true。input我添加了带有类型的 HTML 命令，hidden以识别事务是否已由计算机服务器添加到数据库中。

示例 HTML 和 PHP 命令：

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

示例 Javascript 命令：

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。目前，这些操作防止了我们案例中的多次点击问题。

我希望这些对你也有帮助。

谢谢你。

于 2021-04-23T22:16:18.007 回答
0

如果您正在执行完整的往返回发，则只需使按钮消失即可。如果存在验证错误，该按钮将在重新加载页面时再次可见。

首先设置为您的按钮添加样式：

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

然后让它在点击时隐藏。

$(document).ready(function() {
    $(".hideOnClick").click(function(e) {
        $(e.toElement).hide();
    });
});
于 2017-04-26T15:51:52.323 回答
0

只需将此代码复制粘贴到您的脚本中并 使用您的按钮 ID编辑#button1即可解决您的问题。

 <script type="text/javascript">
                $(document).ready(function(){  
                     $("#button1").submit(function() {
                            $(this).submit(function() {
                                return false;
                            });
                            return true;
                        }); 
        });
     </script
于 2017-09-20T11:55:13.033 回答