防止多次点击按钮
我有以下jQuery代码，以防止双击按钮。 它工作正常。 我正在使用Page_ClientValidate()来确保仅在页面有效时才会阻止双击。 [如果存在validation错误，则不应设置标志，因为没有回发到服务器的启动]
是否有更好的方法可以防止在页面加载之前再次单击按钮？
只有当页面导致回发到服务器时，我们才能设置标志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(); } } }); });
参考文献 ：
- validation器导致双击检查的不正确行为
- 是否使用Page_IsValid或Page_ClientValidate（）（用于客户端事件）
@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); }
工作实例
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 } });
我修改了@Kalyani的解决方案 ，到目前为止它一直工作得很好！
$('selector').click(function(event) { if(!event.detail || event.detail == 1){ return true; } else { return false; } });
使用计数，
clickcount++; if (clickcount == 1) {}
再次回来后，clickcount设置为零。
我们可以使用on和off点击来防止多次点击。 我尝试了它的应用程序，它按预期工作。
$(document).ready(function () { $("#disable").on('click', function () { $(this).off('click'); // enter code here }); })
在回调的第一行中禁用指针事件，然后在最后一行继续它们。
element.on('click', function() { element.css('pointer-events', 'none'); //do all of your stuff element.css('pointer-events', 'auto'); };
可能这将有助于并提供所需的function：
$('#disable').on('click', function(){ $('#disable').attr("disabled", true); });
Hello
一种方法是设置一个计数器，如果数字超过某个数字，则返回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的浏览器）了。
如果你正在进行完整的往返回程，你可以让按钮消失。 如果存在validation错误，则在重新加载页面时将再次显示该按钮。
首先为你的按钮添加一个样式：
然后单击时隐藏它。
$(document).ready(function() { $(".hideOnClick").click(function(e) { $(e.toElement).hide(); }); });
经过几个小时的搜索，我以这种方式修复它：
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; } });
只需将此代码复制粘贴到您的脚本中，然后使用您的按钮ID编辑＃button1即可解决您的问题。