[英]Preventing multiple clicks on button
我有以下 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();
}
}
});
});
参考资料:
@Peter Ivan 在上述参考资料中的注释:
重复调用 Page_ClientValidate() 可能会导致页面过于突兀(多个警报等)。
我发现这个解决方案很简单并且对我有用:
<form ...>
<input ...>
<button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();">
</form>
此解决方案位于:原始解决方案
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
}
});
单击时禁用按钮,操作完成后启用它
$(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);
}
我修改了@Kalyani 的解决方案,到目前为止它运行良好!
$('selector').click(function(event) {
if(!event.detail || event.detail == 1){ return true; }
else { return false; }
});
在回调的第一行禁用指针事件,然后在最后一行恢复它们。
element.on('click', function() {
element.css('pointer-events', 'none');
//do all of your stuff
element.css('pointer-events', 'auto');
};
经过数小时的搜索,我以这种方式修复了它:
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;
}
});
可能这会有所帮助并提供所需的功能:
$('#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>
使用计数,
clickcount++;
if (clickcount == 1) {}
再次回来后,clickcount 设置为零。
我们可以使用 on 和 off click 来防止多次点击。 我在我的应用程序中尝试了它,它按预期工作。
$(document).ready(function () {
$("#disable").on('click', function () {
$(this).off('click');
// enter code here
});
})
你可以使用 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);
您这样做的一种方法是设置一个计数器,如果数量超过特定数量,则返回 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 语句在您的通话之上。
这应该适合你:
$(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 的浏览器)访问它。
如果你正在做一个完整的往返回传,你可以让按钮消失。 如果存在验证错误,则在重新加载页面时该按钮将再次可见。
首先设置为您的按钮添加样式:
<h:commandButton id="SaveBtn" value="Save"
styleClass="hideOnClick"
actionListener="#{someBean.saveAction()}"/>
然后让它在点击时隐藏。
$(document).ready(function() {
$(".hideOnClick").click(function(e) {
$(e.toElement).hide();
});
});
只需将此代码复制粘贴到您的脚本中并使用您的按钮 ID 编辑#button1即可解决您的问题。
<script type="text/javascript">
$(document).ready(function(){
$("#button1").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script
纯 JavaScript:
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>
我们还将按钮设置为.disabled=true
。 我添加了hidden
类型的 HTML 命令input
,以识别计算机服务器是否已将事务添加到数据库中。
示例 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
。 目前,这些操作防止了我们案例中的多次点击问题。
我希望这些也能帮助你。
谢谢你。
我发现的绝对最好的方法是在单击时立即禁用该按钮:
$('#myButton').click(function() {
$('#myButton').prop('disabled', true);
});
我发现可行的一种方法是使用引导 css 显示一个带有微调器的模式窗口。 这样就不能点击背景中的任何内容。 只需确保在漫长的过程完成后再次隐藏模式窗口。
"所以我找到了一个简单的解决方案,希望这会有所帮助。
我要做的就是创建一个计数器= 0,然后制作ZC1C425268E68385D1AB5074C174C17A94F14Z仅在单击计数器= 0时运行时运行时运行时,当有人单击ZC1C1C1C1C425268E.68EE68EMENIST = 0时,将其= 01717171717 AB171717AB1717ABRIND17 AB17 ABINTINY TAIN14141414 Z94FER Z94FER Z94FER Z94FER Z94FER Z94FER Z94FER Z94 FATER Z.从运行 function 多次 function 完成 function 内的代码的最后一行再次将计数器设置为 0
你可以使用这样的结构,它只会执行一次:
document.getElementById('buttonID').addEventListener('click', () => {
...Do things...
},{once:true});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.