javascript jQuery 允许单击但不允许双击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13686419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Allow a single click but disallow a double click
提问by codepuppy
I originally wanted a submit to take place on a single click event:
我最初希望在单击事件上进行提交：
$("#booking_Form #submit_Booking").bind("click", function(event){.....
I then found (obviously) that a double click led to a duplicate submission.
然后我发现（显然）双击导致重复提交。
So I tried capturing and suppressing this with:
所以我尝试使用以下方法捕获和抑制它：
$("#booking_Form #submit_Booking").bind("dblclick", function(event){
return false;
});
But the single click event still fired twice.
但是单击事件仍然触发了两次。
Am I correct it thinking that if it is imperative that a double click does not submit twice that I must change the single click event to a double click event.
我是否更正它认为如果双击不提交两次是必须的，我必须将单击事件更改为双击事件。
Or is there some global way to switch off double clicks.
或者是否有一些全局方法可以关闭双击。
回答by Dom
You should use .one(). That way all subsequent clicks will do nothing
你应该使用.one(). 这样所有后续的点击都不会做任何事情
$("#booking_Form #submit_Booking").one("click", function(event) {
//do something
});
Link: http://api.jquery.com/one/
链接：http: //api.jquery.com/one/
EDIT:
If you want to use .one(), how about doing something like this...
编辑：如果你想使用.one()，如何做这样的事情......
JAVASCRIPT:
爪哇脚本：
$(document).ready(function(){
$("#b1").one("click", function(e){
ajaxFunction();
});
function ajaxFunction(){
$("#b1").one("click", function(e){
ajaxFunction()
});
$.ajax({
type: "POST",
url: "http://fiddle.jshell.net/", //use actual URL
success: function(data){
//do something
}
});
}
});?
回答by Nelson
Just disable your input in the click handler, so the user cannot click a second time, you will enable it again when you finish the logic in your click handler. So you can do as follows:
只需在点击处理程序中禁用您的输入，这样用户就无法再次点击，当您完成点击处理程序中的逻辑时，您将再次启用它。所以你可以这样做：
$("#booking_Form #submit_Booking").bind("click", function(event){
$(this).attr('disabled','true');
...
...
var btn = $(this);
$.ajax('someurl.php',{success: function(){
...
...
btn.removeAttr('disabled');
}
})
}
回答by Snuffleupagus
You can wrap it in a closure and use a dirty flag variable. (closure so the flag isn't global)
您可以将它包装在一个闭包中并使用一个脏标志变量。（关闭所以标志不是全局的）
(function(){
var dirtyFlag = false;
$('#clicker').click(function(){
if (dirtyFlag) return;
dirtyFlag = true;
setTimeout(function(){
console.log('clean and proceeding');
dirtyFlag = false;
}, 500);
});
})();?
Fiddle here. Since disabling the button isn't an option this is IMO the cleanest and simplest solution.
在这里摆弄。由于禁用按钮不是一个选项，这是 IMO 最干净和最简单的解决方案。
回答by pala?н
This might help:
这可能有帮助：
$("#booking_Form #submit_Booking").bind("click", function(e) {
// custom handling here
e.preventDefault();
e.stopPropagation();
}?
Give it a try.
试一试。
回答by Nick.T
If you want the queuing method, try something like this : (just a mockup)
如果你想要排队方法，试试这样的：（只是一个模型）
$('<div>').clearQueue('buttonQueue');
$("#booking_Form #submit_Booking").bind("click", function(event) {
$('<div>').clearQueue('buttonQueue');
$('<div>').queue('buttonQueue', myFunctionHere());
});
putting this in the DocumentReady function should be fine.
把它放在 DocumentReady 函数中应该没问题。
回答by sandip
Before Your logic execute you can disable your button after one click and after executing your code you can enable your button click event. It's simple-
在您的逻辑执行之前，您可以在单击后禁用按钮，在执行代码后，您可以启用按钮单击事件。这很简单-
$("#saveOrder").attr("disabled", true);
Your logic goes here
你的逻辑在这里
$("#saveOrder").attr("disabled", false);
